I am using Django for Rest API and Angularjs for front-end.
I have set the header in Django to give API access to a domain (www.example.com).
The code is working fine, I am able to make ajax calls, from my system (OS - MAC, Browser : Firefox, Chrome, Safari, Android chrome, Native browser). Almost everything.
Now suddenly I am getting this error, on specific OS:
XMLHttpRequest cannot load http://www.apicalls.in/.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://www.example.com' is therefore not allowed access.
I am getting this problem on Windows 10 Chrome browser (Both OS have same chrome version - 46.x.x.x). I am unable to understand this behavior since the API is working fine with all the other devices with same browser. Anyone faced this problem before?
If your server is configured correctly (I mean, it respects the CORS specification), then it may be a cache problem.
If you have retrieved http://www.apicalls.in/ in your browser before your ajax, (That is to say, you have triggered a GET request to http://www.apicalls.in/ with no Origin in your request header. )
then your server would serve the web page with no Access-Control-Allow-Origin header in response. Your next ajax request to the same URL would hit the browser cache and blocked by the browser because of the same origin restriction.
To fix this, you could add a random param to your request url (e.g. http://www.apicalls.in/?_=123) or open up the developer tool of chrome and checked on disable cache. Good luck :)
Related
I am working on setting iframe and stuck with local testing. I have my app running on localhost:3000
I have setup Iframe in my app with src url set to localhost:1234 for local testing. I was hoping accessing via local host would resolve the cross origin error but looks like since port numbers are different, this doesn't seem to work
SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
I have looked into various stack overflow posts and tried disabling chrome web security, even then this doesn't seem to let me do some local testing.
Any suggestions on how to prevent the cross origin error in this case?
Thanks!
Your app (the backend) should send a CORS header (from localhost:3000 if I understand correctly). A different port (just like a different hostname) counts as a different origin, so the same origin policy applies to requests, and you have to explicitly enable cross-origin requests.
The way to do so is your "backend" must send the response header
Access-Control-Allow-Origin: localhost:1234
if that's where your frontend app is running. For development, you can also send
Access-Control-Allow-Origin: *
Don't do * in later stages of your pipeline and especially not in production as you might open your app to further vulnerabilities (CSRF).
If your frontend app uses cookies to authenticate cross-origin, the backend must also send Access-Control-Allow-Credentials: true, and your frontend javascript must add withCredentials: true to the request. However, it doesn't sound like this is the case for you.
I think this is better than disabling cross-origin restrictions as this would work for any developer without any setup, and without compromising browser security. It gives you full control over which client can access your API, and also allows you to understand cross origin requests better.
I was able to do local testing via Safari following the steps here:
Safari -> Preferences -> Advanced
then at the bottom tick Show Develop Menu in menu bar
then in the Develop Menu tick Disable Cross-Origin Restrictions
Cross-Origin Resource Sharing is disabled on some modern browsers by default. Allow CORS: Access-Control-Allow-Origin plugin for Chrome adds necessary HTTP headers to perform development on localhost without CORS error.
I access a server that I can change in any way. It is only available to me.
GETS / POSTS work in curl, but I get an error in my angular web app
I read a ton of posts about this, and after nothing seemed to work, I installed the CORS extension to Chrome, added *://*/*, and I have to turn it on anytime I'm trying to access the server. But it works.
Most of the posts say this is because the server does not allow access from outside sources. So I did some more digging and found the W3 CORS enabled site, that specifies a filter must be added.
However, when I get the error, I can open the network panel and see that the response came back exactly as I was expecting, so why did I get an error?
This makes it seem like Chrome is not allowing access.
Why must the server be changed to allow this?
Does this mean anyone with this chrome extension can access my server?
It seems like it should be possible to configure a header in my $http.get that would allow this, but everyone keeps saying its the server...
Cross domain calls are not allowed by default. When the browser makes a call to a website or Web-API sitting on a different domain than the domain opened on the browser, it includes a HTTP header "Origin" in the request. The server looks at this header and if it's white-listed it includes the header Access-Control_Allow_Origin in the response. All this happens in a pre-flight request using HTTP Options method before the actual GET/POST call. So for the CORS to work the server has to allow the client domain, so the browser can make further calls.
When I make an $http.post request and set the "withCredentials" property to true.
My request works fine in Chrome and Fiefox. However, I'm getting the error below in IE:
XMLHttpRequest: Network Error 0x80070005, Access is denied.
I noticed that if I enable the "Access data resources across domains" setting in IE, The error gets resolved. However I need to find an alternative solution because I can't ask the users to enable that setting obviously.
I noticed that a $http.get request to the same domain is working in IE with no issue, the issue is only with the $http.post request, the Options request is getting a 500 internal server and I see the request and response headers below:
Note:
I do have the necessary custom headers, and I can see them in Chrome when the OPTIONS request succeeds. The headers that I see in Chrome are listed below:
Could you please let me know if I'm missing something that would make the request work in IE without having to enable Access data sources across domains?
Internet Explorer 9 doesn't support cookies in CORS requests. The withCredentials property of the $http arguments attempts to send cookies. I don't think there's any way to fix it with headers. IE10+ should work by default, just be sure that you are not in compatibility mode. CORS isn't fully implemented in IE10 either, but the type of request you are trying to do should work.
You didn't mention what the nature of your web app is, but it impacts the type of workaround you will need for IE9. If possible, see if you can refactor your code to use a GET request instead (again, I don't know what you are trying to do via AJAX so this may be impossible).
You may be able to use Modernizr or something similar to detect if the browser supports CORS. If it is not supported, send the request without AJAX and have a page refresh.
Another alternative if you really want to use AJAX is to set up a proxy on your web server, i.e. the server on the same domain. Instead of making the cross-origin request directly, you make the AJAX request to your same-origin server, which then makes the request to the cross-origin server for you. The server won't have CORS issues. This solution assumes, of course, that you have some server-side scripting going on such as PHP, Node or Java.
The users of our website run our Chrome plugin which, amongst other things, performs cross-origin requests via XMLHttpRequest as described on the Chrome extension development pages. This has been running just fine for a few years now. However, ever since our users upgraded to the latest version of Chrome (v38), these requests have failed. Our site runs on HTTPS and some of the URLs loaded via our content script are on HTTP. The message is:
[blocked] The page at 'https://www.ourpage.com/' was loaded over
HTTPS, but ran insecure content from 'http://www.externalpage.com':
this content should also be loaded over HTTPS.
The reported line where the error occurred is in the content script where I'm issuing the HTTP call:
xhr.send(null);
I have no control over the external page and I would rather not remove SSL from our own page. Question: Is this a bug or is there a workaround that I am not aware of?
(Note: The permissions in the manifest were always set to <all_urls> which had worked for a long time. Setting it to http://*/ and https://*/ did not help.)
If possible, use the https version of that external page.
If that is not possible, use the background page to handle the AJAX request (example).
I need to store cookies for my http requests in my app so I set $httpProvider.defaults.withCredentials = true;
However, upon setting this I got an error when doing http requeust:
A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:8100' is therefore not allowed access.
I believe this error will not show on devices but I want to debug the app using my pc's web browser. I tried to configure my config.xml and setting access origin to localhost:8100 but it doesn't work either.
I'm also using Chrome's Allow-Control-Allow-Origin: * but no luck too.
Correct, when running your ionic app on a mobile device as an app, or in the emulator the CORS restrictions do not apply.
You can disable these restrictions in Google Chrome with the --disable-web-security flag. See https://stackoverflow.com/a/6083677
This flag does reduce your browsers security so I would only keep it disabled while developing your application and relaunch chrome without the flag before doing any other web browsing.