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);
    });
15 upvote
  flag
Are you doing the request from localhost or direcly executing HTML? – MD. Sahib Bin Mahboob
upvote
  flag
@MD.SahibBinMahboob If I understand your question I do request from localhost - I have page on my computer and just run it. When I deploy site on hosting it's gave same result. – Mr Jedi
upvote
  flag
is the domain of your executed page and requested domain name same or different? – MD. Sahib Bin Mahboob
2 upvote
  flag
5 upvote
  flag
For anyone looking for more reading, MDN has a good article all about ajax and cross origin requests: developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_COR‌​S – Sam Eaton
upvote
  flag
try header("Access-Control-Allow-Origin: *"); in the source. – zx1986
upvote
  flag
You can refer this if you are using .Net. //allinonescript.com/questions/19174435/… – sms
upvote
  flag
upvote
  flag
This seems to be a CORS issue. Please take a look at this answer – Nahush Farkande
upvote
  flag
One important note for this type of error in node js. You MUST set your access headers in the startup of your server.js file BEFORE your begin setting up your routes. Otherwise, everything will run great, but you will get this error when you make requests from your app. – Alex J

34 Answers 11

up vote 904 down vote accepted

If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.

When you are using postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

2 upvote
  flag
You're right. I doing request to different domain than my page is. API is on server and I run request from localhost. Before I accept answer can you explain me what mean "executing the request directly" ? POSTMAN don't use domain? – Mr Jedi
95 upvote
  flag
The browser is not blocking the request. The only browsers that outright block cross-origin ajax requests is IE7 or older. All browsers, other than IE7 and older, implement the CORS spec (IE8 & IE9 partially). All you need to do is opt-in to CORS requests on your API server by returning the proper headers based on the request. You should read up on CORS concepts at mzl.la/VOFrSz. Postman sends requests via XHR as well. If you are not seeing the same problem when using postman, this means that you are unknowingly not sending the same request via postman. – Ray Nicholus
8 upvote
  flag
@MD.SahibBinMahboob Postman is NOT sending a request "from your java/python" code. It is sending the request directly from the browser. XHR in Chrome extensions does work a bit differently, especially when cross-origin requests are involved. – Ray Nicholus
upvote
  flag
I make a request from my Browser to an Api-Endpoint and get a "No 'Access-Control-Allow-Origin' header ..." Error. But if I make the same request from also a different server than the Enpoint via php (curl), it works. Actually shouldn't be both not working? What's the difference? Someone any idea? – Yves
7 upvote
  flag
@yves it's the browser who actually imposed the rule. So initiating request from any places rather than browser should work file – MD. Sahib Bin Mahboob
upvote
  flag
@MD.SahibBinMahboob How could CORS help, when the error says: No 'Access-Control-Allow-Origin' header is present on the requested resource.? – Suhail Gupta
1 upvote
  flag
@SuhailGupta, if you allow origins in your server, it will be allowed to do the request which is actually known as CORS. – MD. Sahib Bin Mahboob
upvote
  flag
some sites like awardspace restrict, others like GitHub don't. – Leo Gurdian
upvote
  flag
CURL can be used to avoid this in php. – Gilson Gilbert
upvote
  flag
@GilsonGilbert, OP is trying to issue this request from the browser end. Are you suggesting to use OP's server to use as a proxy? – MD. Sahib Bin Mahboob
upvote
  flag
forums.asp.net/p/2117965/… I have a question open that if I can request to get some help on... – Si8
upvote
  flag
For people who arrive on this page through a search engine: if you send a request on the same page, take care of keeping the same protocol (eg: page loaded in http, and Ajax request on https). – Dunatotatos
upvote
  flag
Even on the same address you'll get this error. 127.0.0.1:8081/TRMSServlet/Login: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '127.0.0.1:5500 – Philip Rego

If you can deal with JSON in return, then try using JSONP (note the P at the end) for speaking between domains:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

Learn more about working with JSONP here:

The advent of JSONP — essentially a consensual cross-site scripting hack — has opened the door to powerful mashups of content. Many prominent sites provide JSONP services, allowing you access to their content via a predefined API.

2 upvote
  flag
With NodeJs with datatype json worked, with ASP.Net this was the culprit – Gaizka Allende
71 upvote
  flag
Be aware jsonp doesn't work for POST content. More discussions here. – Prabu Raja
47 upvote
  flag
How does this have so many up votes when you cant use jsonp with POST requests?!?! – fatlog
7 upvote
  flag
When you use JSONP, $.ajax will ignore type, so it's always GET which means this answer will always work. – noob
1 upvote
  flag
@fatlog Because most people access it with GET – Csaba Toth
upvote
  flag
It's easier to use jsonp than reconfigure the other hosting server. This is a time saver. – Csaba Toth
34 upvote
  flag
Looks like over 200 people just don't GET it – cs01
upvote
  flag
This works to get response from google.com/complete/search?client=firefox&q=query – m.qayyum
2 upvote
  flag
Also note that JSONP is not directly interchangeable with JSON. You need the server to return data in JSONP format too. Simply changing the dataType in the AJAX request settings alone isn't going to work. – Rory McCrossan
1 upvote
  flag
The question says "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 not an answer to the question that was asked. – Quentin

There's a cross-domain issue using Ajax. You must be sure you are accessing your files on the same http:// path without www. (or access from http://www. and post to the same path including www.) which the browser considers as another domain when accessing via a www. 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.

upvote
  flag
yup, i was forced to this in my phonegap app, var app_url = location.protocol + '//' + location.host+'/api/. the problem was the site with www. prepended would bring that error. – Sir Lojik

Try XDomain,

Summary: A pure JavaScript CORS alternative/polyfill. No server configuration required - just add a proxy.html on the domain you wish to communicate with. This library uses XHook to hook all XHR, so XDomain should work in conjunction with any library.

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:

<?php header('Access-Control-Allow-Origin: *'); ?>

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 CROS in the node-red/settings.js file by un-commenting the following lines:

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},
246 upvote
  flag
The question was not about PHP at all. – mknaf
61 upvote
  flag
and it's not secure – llazzaro
upvote
  flag
Yes I know it is about Js, But I solved it using the PHP very easily! About the security issue if JS is currently on another domain, you can go through the JS to allow its cross origin why you didn't find that isn't secure? – shady sherif
82 upvote
  flag
You shouldn't turn off CORS because you don't know what its for. This is a terrible answer. – meagar
86 upvote
  flag
Even though it might not be secure, the question was not about security, but how to accomplish the task. This is one of the options that a developer has to choose from when dealing with cross-domain AJAX requests. It helped me resolve the issue, and for my application, I don't care where the data came from. I sanitize all the input with PHP on the destination domain, so, if someone wants to post some junk to it, let them try. The main point here is, cross-domain AJAX can be allowed from the destination domain. +1 for the answer. – Piero
1 upvote
  flag
I had the same issue on same domain as I have full site using https but only one page is using http method and any request from http page results in same error. I wanted to solve it with JS only as adding such header wasnt my first choice. I have tried all above solutions like placing crossDomain:true, withCredentials: true and also followed CORS but no solution worked ever. Then finaly I have added header('Access-Control-Allow-Origin: *'); – SD.
upvote
  flag
One thing I would like to add here is. If you are using header('Access-Control-Allow-Origin: *'); you need to remove withCredentials: true from ajax request. – SD.
upvote
  flag
horrible and unsecure – fbtb
12 upvote
  flag
While I agree with the general message Piero is giving, that it's not specifically about security, but security is a concern. I think this should have at least said something like "This is generally bad! Don't do this unless you know what you're doing! Here's more documentation on it: ...", and maybe briefly explain why. I would hate for someone to come on here and just think "Oh, I can just add/adjust this header and I'm good!" and not know the full ramifications. I mean, it's kind of on them to research and all, but still. – Thomas F.
upvote
  flag
@shadysherif how to same things using JavaScript any idea ?? – Divyesh Kanzariya
upvote
  flag
@DivyeshKanzariya you can use cors html5rocks.com/en/tutorials/cors – shady sherif
1 upvote
  flag
@shadysherif It worked it can be use in non-transaction data procession comes in handy nice!! – Pradeep Srivastava
1 upvote
  flag
Noone cares about security when developing locally, CORS just gets in the way. You might have a node.js server running on a different port/server than the one you are requesting data from. But in production they may all run off the same server in which case CORS doesn't cause a problem. – Epirocks
3 upvote
  flag
I like this answer... I have the same issue and it solves it... He explained there are some security issues, but that's another problem and let everyone individualy think and resolve that issue... – AriWais

I tried the following solution. This method work only when your server is running locally.

  1. Put following line in file web.xml.

    <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    
  2. Download cors-filter-2.1.2 and java-property-utils-1.9.1 and put in library
  3. Open a browser to allow access control with following code in terminal (Mac)

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files
    

I 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.

<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
    <cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin"> 
    <cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS">      
    <cfheader name="Access-Control-Allow-Origin" value="*">      
    <cfheader name="Access-Control-Max-Age" value="360">        
</cffunction>
5 upvote
  flag
It's not angular that makes the OPTIONS request, it's the browser based on the request! – Narretz
1 upvote
  flag
Narretz - calling API via browser doesn't produce this error, nor it makes an extra options call. When angular used it does. – Leonid Alzhin
3 upvote
  flag
Narretz is right, it is not related to angular. It's related to how CORS works. – Emile Bergeron

This is not a fix for production or when application has to be shown to the client, this is only helpful when UI and Backend development are on different servers and in production they are actually on same server. For example: While developing UI for any application if there is a need to test it locally pointing it to backend server, in that scenario this is the perfect fix. For production fix, CORS headers has to be added to the backend server to allow cross origin access.

The easy way is to just add the extension in google chrome to allow access using CORS.

(https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US)

Just enable this extension whenever you want allow access to no 'access-control-allow-origin' header request.

Or

In Windows, paste this command in run window

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

this will open a new chrome browser which allow access to no 'access-control-allow-origin' header request.

upvote
  flag
I am trying to use that CORS tool but I dont know how to use it. Can you help me with that? – Ruby_Pry
upvote
  flag
@Ruby_Pry just add the extension from the url given above and then you can see the CORS app icon on top left side of your chrome browser, click on that, you will see a popup where you can ON it whenever u want to allow access through CORS. – shruti
101 upvote
  flag
This is great but clients can't be asked to launch chrome this way to enforce an internal requirement for a webservice call. – Taersious
upvote
  flag
@Taersious yes you are right, for that we need to set CORS headers at server end. – shruti
55 upvote
  flag
this shouldn't be accepted as an answer, installing a third party plugin to fix your app, rather than understanding CORS and fixing your app, how will other people use your api? will you make them all install this plugin – James Kirkby
4 upvote
  flag
I installed this extension and did a request, than checked the request in fiddler, the following was specified -> Origin: evil.com . Looks like this extension is changing the Origin to evil.com – wagwanJahMan
1 upvote
  flag
This extension is working like a charm. But really what they are doing internally? Is there a way to do the same in Javascript or Jquery way rather than using a plugin ? – sms
upvote
  flag
@sms why do want to do in javascript, what is exact use case ? – shruti
upvote
  flag
@shruti Since I am going to give the application to the end user, I need to give separate plugins for each browser. It is also not possible to add header in my target server. If there is any change to be done, it should be done in my client application from where the ajax call is made. – sms
upvote
  flag
@sms I think u can use jsonp, m not sure. look at this link dev.socrata.com/docs/cors-and-jsonp.html may be it helps. – shruti
1 upvote
  flag
worked well for me. i am using this with Cordova in debugging via a "browser" platform via cordova run browser – watsonic
1 upvote
  flag
I found the extension doesn't fill the bill. It seems Chrome does not like the fact that the Access-Control-Allow-Origin: * when withCredentials is used: <blah blah> has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'null' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribut – frooble
9 upvote
  flag
I think this is a really great answer if you don't need a permanent fix or if you only need CORS disabled temporarily. That's what I needed, and this solution worked great. Obviously, this could never be considered a permanent solution. – jtcotton63
1 upvote
  flag
You're recommending people to disable all security in their browser just to run your apps code? No no no no no no!!! – Cerin
1 upvote
  flag
I can't believe this answer got any upvotes or credence at all. Instead of solving the problem, you've just disable crippled the browse security. Stupid solution. – codemagician
upvote
  flag
This answer is fine. For dev work, this got me up-and-running asap and I will come back and find the proper fix later... – Adam Hughes
1 upvote
  flag
This one is great, it helped me to test my code in local machine where as on server front end and back end code is on same domain so this issue anyway not going to come – TechnoCrat
upvote
  flag
Great, "chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security" this worked for now. – Codiee
upvote
  flag
You can be safer and define more customizations (defining which origin web/localserver is allowed to make CO requests, Access-Control-Allow-Headers and Access-Control-Allow-Methods) through Moesif's Chrome plugin. Shruti, if you can include this in your answer, I believe it'd help even more people. – CPHPython

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:

http://cors.io/?http://HTTP_YOUR_LINK_HERE

20 upvote
  flag
What are the downsides of this? Are those guys intercepting my data? – Sebastialonso
1 upvote
  flag
..This application is temporarily over its serving quota. Please try again later. – Li3ro
5 upvote
  flag
cors.io/?u=HTTP_YOUR_LINK_HERE (small correction) – jkpd
92 upvote
  flag
I don't think sending your data over 3rd party proxy is a good idea – Daniel Alexandrov
upvote
  flag
Only get requests allowed i guess.. – Anirudha
6 upvote
  flag
One downside is they are sometimes overloaded, as they are now. This application is temporarily over its serving quota. Please try again later. – Daniel Hickman
14 upvote
  flag
try too https://crossorigin.me/http://example.com – KingRider
1 upvote
  flag
Golden for testing! Have been struggeling for a long time to load some test data from foo.bar.whatever, this is the solution to that problem. – Automatico
1 upvote
  flag
How to implement our own service for what this website does? – Ulysses Alves
upvote
  flag
@UlyssesAlves, it's simple. Just implement a service service that receive a URL as parameter, then download the content of this url and return to the client. – nsantana
3 upvote
  flag
The bad: The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.. The ugly: Apache/2.4.7 (Ubuntu) Server at cors.io Port 80 (Apache for this? LOL) – Nino Škopac
upvote
  flag
1 more, add https to cors.io – N Sham

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:

Spark.get("/someRestCallToSpark", (req, res) -> {
    res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working 
    return "some text";
 });

On the client-side I had to add this to the request:

Ext.Ajax.request({
    url: "http://localhost:4567/someRestCallToSpark",
    useDefaultXhrHeader: false, //important, otherwise its not working
    success: function(response, opts) {console.log("success")},
    failure: function(response, opts) {console.log("failure")}
});
upvote
  flag
Had the same architecture, therefore the same problem, and this solve it. – Fafhrd
3 upvote
  flag
This is not a good idea to allow requests from any domain. You should restrict it to trusted domain only. – MD. Sahib Bin Mahboob
upvote
  flag
If you are the host of both domains, then it is common practice to enable this type of requests. – kiltek

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:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

To fix it, a finalization call like .ToList() or .FirstOrDefault() at the end of the query is required, like so:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}
upvote
  flag
That seems like just an error that will happen in any application of entity framework if you don't finalize the query. Not really related to CORS or the OP's question. – Gary
2 upvote
  flag
It may very well not be related to CORS, but it throws an error that sounds like it has something to do with CORS; hence my answer. – Loyalar

If you are using Node.js, try it:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

More information: CORS on ExpressJS

5 upvote
  flag
I am giving you the up vote because this is exactly what I needed. But think it is a bad idea to promote the "*" example without explaining that it will allow any connection and should not be used in production. This is explained at the MDN link developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_COR‌​S. – rob
upvote
  flag
@rob thanks for your comment. You are right, we should specify which origins are allowed to use the resources. But in case, the resources use for public purpose and we don't know the consumers, I think we should go with "*" if I am not wrong. – Nguyen Tran
upvote
  flag
I have used this concept and my issue is resolved in nodejs. Thanks – Deepak Bhatta
upvote
  flag
app.use(function (req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization'); res.setHeader('Access-Control-Allow-Credentials', true); if ('OPTIONS' === req.method) { res.send(204); } else { next(); } }); – Ricky sharma
upvote
  flag
Regarding dangers of using "Access-Control-Allow-Origin", "*", see security.stackexchange.com/a/45677. tldr: W3 spec actually advises that: A resource that is publicly accessible, with no access control checks, can always safely return an Access-Control-Allow-Origin header whose value is "*" – Code-Read

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.

Based on shruti's answer, I've created a shortcut of Chrome browser with needed arguments: enter image description here enter image description here

42 upvote
  flag
Excellent. Now I have to go around to my 100,000 users and disable their web security on chrome. – Ganesh Krishnan
5 upvote
  flag
@GaneshKrishnan The questioner seems to be a developer and his question (in my opinion) seems for development purposes, as my problem was. And yes, if you want to hack your users, go around them and disable their web security on Chrome :) – Mohammad

If you do NOT want to:

  1. Disable web security in Chrome
  2. Use JSONP
  3. Use a third party site to re-route your requests

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.wikibackpacker.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)

upvote
  flag
Are your referring to this example code from main.min.js?: t.post("https://wiki.wikinomad.com/api.php?origin=https://ww‌​w.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

In my case I was using JEE7 JAX-RS application and following tricks worked perfectly for me:

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }

You can bypass the problem by using YQL to proxy the request through Yahoo's servers. It is just a few lines of code:

var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';

$.ajax({
    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    },
    'dataType': 'jsonp',
    'success': function(response) {
        console.log(response);
    },
});

Here's the link with an explanation: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

upvote
  flag
but after seconds ... all the other codes run then it initialize. – saber tabatabaee yazdi

For c# web services - webapi

Please add the following code in your web.config file under <system.webServer> tag. This will work

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Please make sure you are not doing any mistake in the ajax call

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);    
    },
    error: function () {
        console.log("error");
    }
});

Angular 4 issue please refer : http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Note: If you are looking downloading content from third party website then this will not help you. You can try the following code but not JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");
upvote
  flag
This config solved same error on Wordpress at Azure Services. Thanks. – Andre Mesquita
5 upvote
  flag
I would suggest using a specific origin value to avoid requests from external domains. So for example instead of * use https://www.myotherdomain.com – pechar

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.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

It also supports all the way to import to your project, like ES6 module, CommonJS and even <script> in HTML.

upvote
  flag
I have an IIS site which is local that is hosting my API. I have an external site which is accessed outside the local network. I am trying to execute the API from the external site, I have CORS enabled for the external site (e.g. [EnableCors(origins: "http://websitelink.com", headers: "*", methods: "*")] but it is not working. Any idea? forums.asp.net/p/2117965/… – Si8

I got this error with $http.get in Angular. I needed to use $http.jsonp instead.

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 to https://cors-anywhere.herokuapp.com/http://foo.com and the proxy adds the necessary Access-Control-* headers to the response the browser sees.

I have resolved this by enabling CORS for the client URL accessing the web API, and it worked successfully.

For example:

[EnableCors(origins: "http://clientaccessingapi.com", headers: "*", methods: "*")]

Please add dataType: 'jsonp' in the Ajax function and it works. (:


    $.ajax({
      type: "POST",
      dataType: 'jsonp',
      success: function(response) {
        alert("success");
      },
      error: function(response) {
        console.log(JSON.stringify(response));
      }
    });

upvote
  flag
Doesn't work for Chrome – Omar Khazamov
upvote
  flag
@OmarKhazamov yes it does. – Kevin B
upvote
  flag
@Sonu uhm... POST, with JSONP? what? that doesn't make any sense. – Kevin B

For Opera (it works the same as Chrome), I started the browser with this command:

opera --user-data-dir="~/Downloads/opera-session" --disable-web-security

The problem is solved! Now I can work on a local HTML file (on my hard disk drive) and call Ajax requests to remote origins in the same file.

Note 1: You can give any folder in your home directory as --user-data-dir.

Note 2: Tested on Debian 8 (Jessie)/Opera 39

Here is a screenshot

When you start normally (without the parameters above), the same request falls into the error code block.

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.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

https://httpd.apache.org/docs/2.4/mod/core.html#filesmatch

Just to mention another way of "bypassing" it - AJAX proxy. Send request to your server to fetch the data from another origin and send the request back to you.

I prefer this approach over JSONP because it has some potential security issues.

upvote
  flag
The question says "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 not an answer to the question that was asked. – Quentin

For Ruby on Rails server in application_controller.rb, add this:

after_action :cors_set_access_control_headers

def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
end
upvote
  flag
The question says "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 not an answer to the question that was asked. – Quentin

On my website (based on .NET) I've just added this:

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

Big thanks to this video.

1 upvote
  flag
The question says "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 not an answer to the question that was asked. – Quentin

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.

1 upvote
  flag
In your case, wouldn’t sending the Vary: Origin response header have achieved the same effect? //allinonescript.com/questions/46063304/… – sideshowbarker
2 upvote
  flag
Yes but we don't. A service exposed to the world can be DOS'ed via cache explosion by sending bogus values. Akamai has some help in this area to reduce DOS exposure. My point is that you can do everything listed and still have a problem because of caching. – No Refunds No Returns
upvote
  flag
The question says "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 not an answer to the question that was asked. – Quentin
upvote
  flag
@Quentin You are so RIGHT! however this is the #1 hit for many searches on this topic, there are already a variety of answers that vary from the exact question yet provide useful information AND this was what we discovered on Sept 7 after exhausting all of the threads. I appreciate your downvote. Future readers will be also able be able to weigh whether or not this "not an answer" was helpful by voting, perhaps even differently from you. There is at least one other person who has already publicly disagreed with your opinion. Will be interesting to see how the voting goes from here........ – No Refunds No Returns
upvote
  flag
+4 / -1 Thanks again masses. – No Refunds No Returns

Perhaps you can copy the resource from the Production server to the Development server, and have the url to the resource to adjust dynamically. In that way you would be reading always from the same origin, eliminating the cross origin exception.

If you get this error message from the browser:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

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:

<?php header('Access-Control-Allow-Origin: *'); ?>

What you really need to do, especially if you only use JavaScript to do the Ajax request, is an internal proxy who takes your query and send it through to the remote server.

First in your JavaScript, do an Ajax call to your own server, something like:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async:false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

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:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

By doing:

echo json_encode(file_get_contents($url));

You are just doing the same query but on the server side and after that, it should works fine.

Answer copied and pasted from NizarBsb

For GoLang API:

First you can take a look at MDN CORS Doc to know what's CORS,

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 at Header of Server Response.

For example, Setting following header in Server Response means that only request sent from http://foo.example can access your server:

Access-Control-Allow-Origin: http://foo.example

and following allow request sent from any origin(or domain):

Access-Control-Allow-Origin: *

and as I know in the error message, requested resource means resource of server, so No 'Access-Control-Allow-Origin' header is present on the requested resource. means you didn't set Access-Control-Allow-Origin header in your Server Response, or maybe you set but the origin of request isn't list in Access-Control-Allow-Origin so request is not allowed access:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

In GoLang, I use gorilla/mux package to build API server at localhost:9091, and I allow CORS by add "Access-Control-Allow-Origin", "*" to header of response:

func main() { //API Server Code
    router := mux.NewRouter()
    //api route is /people, 
    //Methods("GET", "OPTIONS") means it support GET, OPTIONS
    router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
    log.Fatal(http.ListenAndServe(":9091", router))
}

// method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {

    //Allow CORS by setting * in sever response
    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    json.NewEncoder(w).Encode("OKOK")
}

and I use javascript in client, at localhost:9092 make request by Chrome can succesfully get "OKOK" from Server localhost:9091.

function GetPeople() {
    try {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://localhost:9091/people", false);
        xhttp.setRequestHeader("Content-type", "text/html");
        xhttp.send();
        var response = JSON.parse(xhttp.response);
        alert(xhttp.response);
    } catch (error) { alert(error.message);}
}

Besides you can check your request/response header by tools like Fiddler.

For completeness, Apache allow cors:

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"
upvote
  flag
Anybody can add to that ^ – zak

Most 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:

window.handleData = function(data) {
  console.log(data)
};

var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);
upvote
  flag
Excellent answer, but if script is not in correct format, then you can't reach its code (script.text= empty). What to do in this case? How to reach its code? – Angel T
upvote
  flag
How to prevent the execution of the script (maybe as comment it all)? – Angel T
upvote
  flag
And another interesting thing: Only IE11 with Enabled "Access data sources across domains" can access cross-domain (without of need to control server to modificate Origin!. All rest major browsers can't – Angel T

Not the answer you're looking for? Browse other questions tagged or ask your own question.