I am trying to do authorization using JavaScript by connecting to the RESTful API built in Flask. However, when I make the request, I get the following error:
XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I know that the API or remote resource must set the header, but why did it work when I made the request via the Chrome extension Postman?
This is the request code:
$.ajax({
type: "POST",
dataType: 'text',
url: api,
username: 'user',
password: 'pass',
crossDomain : true,
xhrFields: {
withCredentials: true
}
})
.done(function( data ) {
console.log("done");
})
.fail( function(xhr, textStatus, errorThrown) {
alert(xhr.responseText);
alert(textStatus);
});
There's a cross-domain issue using Ajax. You must be sure you are accessing your files on the same
http://
path withoutwww.
(or access fromhttp://www.
and post to the same path includingwww.
) which the browser considers as another domain when accessing via awww.
path, so you see where the problem is. You are posting to a different domain and the browser blocks the flow because of the origin issue.If the API is not placed on the same host that you are requesting from, the flow is blocked, and you will need to find another way to communicate with the API.
Because
$.ajax({type: "POST" - Calls OPTIONS
$.post( - Calls POST
both are different Postman calls "POST" properly but when we call it will be "OPTIONS"
For c# web services - webapi
Please add the following code in your web.config file under <system.webServer> tag. This will work
Please make sure you are not doing any mistake in the ajax call
jQuery
Angular 4 issue please refer : http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/
Note: If you are looking for downloading content from third party website then this will not help you. You can try the following code but not JavaScript.
*
usehttps://www.myotherdomain.com
– pechar Jun 9 '17 at 8:30Try XDomain,
If you do NOT want to:
and you are sure that your server has CORS enabled then (test CORS here: http://www.test-cors.org/)
Then you need to pass in origin parameter with your request. This origin MUST match the origin that your browser sends with your request.
You can see it in action here: http://www.wikinomad.com/app/detail/Campgrounds/3591
The edit functionality sends a GET & POST request to a different domain for fetching data. I set the origin parameter which resolves the issue. The backend is a mediaWiki engine.
tldr: Add "origin" parameter to your calls which must be the Origin parameter that your browser sends (you cannot spoof the origin parameter)
t.post("https://wiki.wikinomad.com/api.php?origin=https://www.wikinomad.com", n, o).then(function(e) {...
. If so, isn't it true that this way of specifying an origin requires that the PHP being served from the "backend" is coded to support it, and this answer will not work otherwise? – CODE-REaD Feb 15 '18 at 20:18I had a problem with this when I used AngularJS to access my API. The same request worked in SoapUI 5.0 and ColdFusion. My GET method already had Access-Control-Allow-Origin header.
I found out that AngularJS makes a "trial" OPTIONS request. ColdFusion, by default, generates OPTIONS method, but it doesn’t have much, these headers specifically. The error was generated in response to that OPTIONS call, and not to my intentional call to GET. After I added OPTIONS method below to my API, the problem has been resolved.
I had the following configuration, resulting in the same error, when requesting responses from the server.
Server-side: SparkJava --> provides the REST-API
Client-side: ExtJs6 --> provides Browser rendering
On the server-side I had to add this to the response:
On the client-side I had to add this to the request:
Based on shruti's answer, I've created a shortcut of Chrome browser with needed arguments:
https://github.com/Rob--W/cors-anywhere/ provides (Node.js) code you can use to set up and run your own CORS proxy. It’s actively maintained and provides a number of features for controlling the proxy behavior beyond just the basic sending of the correct
Access-Control-*
response headers.https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has details to explain how browsers handle cross-origin requests that client-side web applications make from JavaScript and what headers you must configure sending of by the server the request is made to, if you can.
In the case where a site you need to make a request to and get a response from doesn’t return the
Access-Control-Allow-Origin
response header, browsers are always going to block cross-origin requests made to it directly by your client-side JavaScript code from working. And so if the site is not one you control and can configure behavior for, the only thing that will work in that case is proxying the requests—either through your own proxy you run yourself or through an open proxy.As mentioned in other comments here, there are good reasons for not trusting an open proxy with your requests. That said, if you know what you’re doing and you decide an open proxy works for your needs, https://cors-anywhere.herokuapp.com/ is one that’s reliably available, actively maintained, and that runs an instance of the https://github.com/Rob--W/cors-anywhere/ code.
As with other open proxies mentioned here (a couple of which at least don’t seem to be available any longer), the way it works is that instead of having your client code send a request directly to, e.g.,
http://foo.com
you send it tohttps://cors-anywhere.herokuapp.com/http://foo.com
and the proxy adds the necessaryAccess-Control-*
headers to the response the browser sees.You can bypass the problem by using YQL to proxy the request through Yahoo's servers. It is just a few lines of code:
Here's the link with an explanation: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html
If you are using Entity Framework, it seems that this error will sometimes be thrown even if you have
CORS
enabled. I figured out that the error occurred because of a missing finalization of the query. I'm hoping this will help others in the same situation.The following code can throw the
XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource.
error:To fix it, a finalization call like
.ToList()
or.FirstOrDefault()
at the end of the query is required, like so:In my case I was using JEE7 JAX-RS application and following tricks worked perfectly for me:
I was successfully able to solve (in my case for fonts) using htaccess but obviously, OP is asking little different. But you can use FileMatch pattern and add any sort of extension so that it won't give cros error.
https://httpd.apache.org/docs/2.4/mod/core.html#filesmatch
Popular question -- Another thing to look at if you've read this far and nothing else has helped. If you have a CDN such as Akamai, Limelight or similar, you might want to check the cache key you have for the URI of the resource. If it does not include the Origin header value you may be returning a response cached when requested from another Origin. We just spent half a day debugging this. The CDN configuration was updated to only include the Origin value for a few select domains that are ours and set it to null for all others. This seems to work and allows browsers from our known domains to view our resources. Certainly all the other answers are prerequisites to getting here but if the CDN is the first hop from your browser this is something to review.
In our case we could see some requests making it to our service but not nearly the volume the site was sending. That pointed us to the CDN. We were able to go back and see the original request was served from a direct request, not part of a browser AJAX call and the response header Access-Control-Allow-Origin was not included. Apparently the CDN cached this value. The Akamai CDN configuration tweak to consider the Origin request header value as part of the match seems to have made it work for us.
Vary: Origin
response header have achieved the same effect? stackoverflow.com/questions/46063304/… – sideshowbarker Sep 7 '17 at 21:19For the GoLang API:
First you can take a look at MDN CORS Doc to know what CORS is. As far as I know, CORS is about whether to allow Origin Of Request to access Server Resource or not.
And you can restrict which request origin can access the server by setting
Access-Control-Allow-Origin
atHeader
of Server Response.For example, Setting following header in Server Response means that only request sent from
http://foo.example
can access your server:and following allow request sent from any origin(or domain):
And as I know in the error message,
requested resource
means resource of server, soNo 'Access-Control-Allow-Origin' header is present on the requested resource.
means you didn't setAccess-Control-Allow-Origin
header in your Server Response, or maybe you set but the origin of request isn't list inAccess-Control-Allow-Origin
so request is not allowed access:In GoLang, I use
gorilla/mux
package to build API server atlocalhost:9091
, and I allow CORS by add"Access-Control-Allow-Origin", "*"
to header of response:And I use JavaScript in the client, at
localhost:9092
make request by Chrome can succesfully get "OKOK" from Serverlocalhost:9091
.Besides you can check your request/response header by tools like
Fiddler
.If you get this error message from the browser:
when you're trying to do an Ajax POST/GET request to a remote server which is out of your control, please forget about this simple fix:
You really need, especially if you only use JavaScript to do the Ajax request, an internal proxy who takes your query and sends it through to the remote server.
First in your JavaScript code, do an Ajax call to your own server, something like:
Then, create a simple PHP file called proxy.php to wrap your POST data and append them to the remote URL server as a parameters. I give you an example of how I bypass this problem with the Expedia Hotel search API:
By doing:
You are just doing the same query, but on the server side and after that, it should work fine.
Answer copied and pasted from NizarBsb
A lot of times this happens to me from javascript to my php api, because one of a few reasons. I forget to put the
<?php header('Access-Control-Allow-Origin: *'); ?
is one. This is helpful for cross sub domain access. Another reason, is because in jQuery ajax request I am specifying a specific dataType and returning a different dataType, so it throws an error.The Last and most prominent reasoning for this error is there is a parse error on the page you are requesting. If you hit that page url in your browser than more than likely you will see a parse error and you will have a line number to address the issue.
I hope this helps someone. It took me a while each time to debug this and I wish I had a checklist of things to verify.
I got this error with
$http.get
in Angular. I needed to use$http.jsonp
instead.On my website (based on .NET) I've just added this:
Big thanks to this video.
CORS is for you.
CORS is "Cross Origin Resource Sharing" and is a way to send a cross-domain request. Now the XMLHttpRequest2 and Fetch API both support CORS.
But it has its limits. Server need to specific claim the Access-Control-Allow-Origin, and it can not be set to '*'.
And if you want any origin can send request to you, you need JSONP (also need to set Access-Control-Allow-Origin, but can be '*').
For lots of request way if you don't know what to choose, I think you need a fully functional component to do that. Let me introduce a simple component catta
If you are using a modern browser (> Internet Explorer9, Chrome, Firefox, Edge, etc.), it is very recommended you use a simple, but beautiful component, https://github.com/Joker-Jelly/catta. It has no dependencies, is less than 3 KB, and it supports Fetch, Ajax and JSONP with same dead-simple syntax and options.
It also supports all the way to import to your project, like ES6 module, CommonJS and even
<script>
in HTML.[EnableCors(origins: "http://websitelink.com", headers: "*", methods: "*")]
but it is not working. Any idea? forums.asp.net/p/2117965/… – Si8 Mar 24 '17 at 14:12Most of these answers tell users how to add CORS headers to a server they control.
However, if you need data from a server you don't control in a webpage, one solution is to create a script tag on your page, set the src attribute to the api endpoint that doesn't have CORS headers, then load that data onto the page:
For completeness, Apache allows cors:
In jsonp request you should catch "jsonpCallback" and send him back.
On backend side (if you use as backend PHP)
In this case backend response seems like
but you can set a "jsonpCallback" manually on frontend and catch him on backend side
In this case backend response seems like
in case you want to fix this on the backend (in Flask), rather than on the front end, I would totally recommend the Flask CORS python package. Flask Cors
With one simple line in your app.py you can automatically insert the standard allow any origin header, or customise it as required.
It's very simple to solve if you are using PHP. Just add the following script in the beginning of your PHP page which handles the request:
Warning: This contains a security issue for your PHP file that it could be called by attackers. you have to use sessions and cookies for authentication to prevent your file/service against this attack. Your service is vulnerable to cross-site request forgery (CSRF).
If you are using Node-red you have to allow CORS in the
node-red/settings.js
file by un-commenting the following lines:If you can deal with JSON in return, then try using JSONP (note the P at the end) for speaking between domains:
Learn more about working with JSONP here:
I wish someone shared this site with me long ago http://cors.io/ it would have saved a ton of time compared to building and relying on my own proxy. However, as you move to production, having your own proxy is the best bet since you still control all aspects of your data.
All you need:
https://cors.io/?http://HTTP_YOUR_LINK_HERE