I am implementing (I am trying to implement) a 100% client side AngularJS web app which should access the google calendar API. Of course, this doesn't work because I hit the cross domain problem:
XMLHttpRequest cannot load http://... . Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin.
Is there any solution to bypass this issue, except creating a proxy? By setting some header or changing some google configuration? I don't see one ...
Great hint Philipp! The google javascript api client (see here) does the job.
But I am wondering: How does the google javascript api client bypasses the cross domain issue? Does someone know?
You need googles side to return the right headers, Access-Control-Allow-Origin, to your browser so it doesnt complain about the cross browser issue.
Make sure in the google cloud console is configured correctly to web application. Im assuming web app because the redirect though.
If its a phoneapp or not serving anything on localhost:9000 redirect endpoint there are other options. For example you could open up the oauth redirect in another window, still use localhost:9000 as the redirect. Even though you are not listening at that port you could still grab the url code or error that is set on the redirect from the parent window.
CORS is an issue that you will experience when running the app through web browsers. I suggest you download a CORS toggle extension on google chrome so you can toggle off CORS and the API will connect. Good luck!
Related
I am developing a React project for studies and would like to publish.
I tried some ways, but the site is blank, there is no data from the NEWS-API I am using.
It seems to make no mistake.
It is a front application, only react with the API.
If it helps, here's the repository link.
https://github.com/carlos-souza-dev/apinews
I visited your deployment in vercel from your github repo and noticed this issue.
You're requesting data from the API over http which is insecure, while your page hosted by vercel uses https.
Modern browsers donot allow for a page served over https to request http data.
It might just be a fixed by changing your urls to use https, or if the API didn't have https you might have to do other workarounds.(Although it's better to use an API with https support)
I noticed this by opening the console after visiting your page to see these Mixed content requests blocked error.
The reason for the blank page after loading is that the Promise to get the data from the API get rejected but never handled causing the JavaScript execution to stop
[EDIT 1]
I read through some of the code in your repository and noticed a link pointing to localhost. It looks like you tried to setup a nodejs server to proxy data through https
The API you're using does seem to have HTTPS support
Conclusion:
Try changing the links to the API to https instead of http in your react code and see if it works. If it does, there's no need for a backend server of you're own
If the API doesn't have HTTPS support however, do either one of
Migrate to a different API with HTTPS support
Try serving your static react app through the backend and pointing your react app to /path/to/api/route without an absolute url and use the proxy setting in package.json as said here for development
Point to a full path to your backend server on the internet (i.e remove localhost links)
Also note that you cannot deploy a backend to vercel but it does support serverless functions
My Angular app which uses dialogflow is deployed on Google App engine and working fine
here.
I also added a subdomain to access it.
Now when I try to add this in an iframe as follows,
Following error message is shown.
classic.aim-tech.net is blocked
classic.aim-tech.net refused to connect.
ERR_BLOCKED_BY_RESPONSE
I think its really related to a webpage in local file or http server accessing a https app.
How to resolve this error?
The last line of https://github.com/GoogleCloudPlatform/dialogflow-chatbot/blob/master/angular-ui/app.yaml#L52 causes this.
X-Frame-Options: DENY
You should remove (not recommended for prod environments) or modify this HTTP Response Header property.
I am building a simple ionic/angular mobile app. I am using IntelliJ IDEA for development.
During development, I simply use 'ionic serve' command from Intellij terminal, to launch the mobile app in browser. The app connects to a REST service which is deployed on a Tomcat server.
When app tries to connect to REST service, it gives me the below error in browser console
XMLHttpRequest cannot load http://localhost:8080/MyWorkflows/rest/UserService/users. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 500.
I understand that this is happening as REST services are running on a different domain and hence browser blocks it. However, I am at a loss to understand how should I proceed?
Can someone please help.
In your REST service deployed on Tomcat you should set Access-Control-Allow-Origin: http://localhost:8100 and you need to allow the http request methods you use with Access-Control-Allow-Methods: POST, GET, OPTIONS.
This tells the browser that your service allows the web app running on http://localhost:8100 to access the service. The browser checks this on resource request. For http request methods other than GET there might be an additional Preflight Request added, so you need to have your WebService answering that as well.
See https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
If you do not control remote end, use Ionic CLI proxy server. There is very good how-to article on Ionic blog: Handling CORS issues in Ionic.
We have added a custom domain to our appengine app. We followed the instructions when we made our changes, but apparently something went wrong and we can't find the way to fix it.
In our google apps appengine tab, the main URL specified is https://appid.appspot.com. That means, however, that all traffic from the domain mappings will be sent to the https url, and of course this won't work. I don't know how this https url ended up there as in the app engine admin console, the app url is http://appid.appspot.com.
We haven't find the way to change this url. We have tried to disable this app in google apps but it didn't work, it stays there.
in your app.ymal
-secure: optional
for more details:
http://code.google.com/appengine/docs/python/config/appconfig.html
scroll to Secure URLs
I'm testing a Google App Engine app on my Windows machine, running locally on localhost:8084. Fiddler2 shows all my activity when I navigate around my app, but when requesting an external url with urlfetch.fetch() it doesn't show up in Fiddler at all, even when using an http, not an https address, and with a successful status code 200 in the response.
What do I need to do to get the urlfetch.fetch() request from Google App Engine to show up in Fiddler2?
My understanding is that Fiddler2 runs as an HTTP proxy; browser requests go through this proxy instead of directly to the internet resource. This allows Fiddler2 to capture information about the request and the response.
According to the Fiddler2 docs, "You can configure any application which accepts a HTTP Proxy to run through Fiddler so you can debug its traffic". So I think you would need to change the URLFetch API call to use a proxy, supplying the Fiddler URL and port. However, the URLFetch documentation doesn't specify exactly how to do this. You might be able to use urllib2 as specified in this question.
Irussell is generally right, but I'd like to make the answer more specific.
As proxies aren’t supported within Google AppEngine production environment, it’s not directly supported by development engine either. It seems that the only way to overcome this limitation is to modify the code of AppEngine development server.
You'll have to modify the urlfetch_stub.py file, by adding the following lines:
connection = connection_class('127.0.0.1', 8888)
and
full_path = protocol + "://" + host + full_path
You may find the detailed explanation in my blog post Use Fiddler to debug urlfetch requests in Google AppEngine