为什么我的 JavaScript 代码收到“请求的资源上不存在‘Access-Control-Allow-Origin’header”错误，而 Postman 却没有？

Question

Mod note : This question is about why XMLHttpRequest / fetch /etc. on the browser are subject to the Same Access Policy restrictions (you get errors mentioning CORB or CORS) while Postman is not. This question is not about how to fix a "No 'Access-Control-Allow-Origin'..." error. It's about why they happen.

Please stop posting :

• CORS configurations for every language/framework under the sun. Instead find your relevant language/framework's question .
• 3rd party services that allow a request to circumvent CORS
• Command line options for turning off CORS for various browsers

---

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);
      });

Answer 1

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.

Answer 2

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-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?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.

Answer 3

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.

Answer 4

WARNING: Using Access-Control-Allow-Origin: * can make your API/website vulnerable to cross-site request forgery (CSRF) attacks. Make certain you understand the risks before using this code.

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: *'); ?>

If you are using Node-red you have to allow CORS 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"
},

If you are using Flask same as the question; you have first to install flask-cors

$ pip install -U flask-cors

Then include the Flask cors in your application.

from flask_cors import CORS

A simple application will look like:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

For more details, you can check the Flask documentation .

Answer 5

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

Answer 6

Because
$.ajax({type: "POST" - calls OPTIONS
$.post( - Calls POST

Both are different. Postman calls "POST" properly, but when we call it, it will be "OPTIONS".

For C# web services - Web API

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");
    }
});

Note: If you are looking for downloading content from a 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");

Answer 7

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

Answer 8

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.

Answer 9

Deep

In the below investigation as API, I use http://example.com instead of http://myApiUrl/login from your question, because this first one working. I assume that your page is on http://my-site.local:8088 .

NOTE : The API and your page have different domains!

The reason why you see different results is that Postman:

• set header Host=example.com (your API)
• NOT set header Origin
• Postman actually not use your website url at all (you only type your API address into Postman) - he only send request to API, so he assume that website has same address as API (browser not assume this)

This is similar to browsers' way of sending requests when the site and API has the same domain (browsers also set the header item Referer=http://my-site.local:8088 , however I don't see it in Postman). When Origin header is not set, usually servers allow such requests by default.

This is the standard way how Postman sends requests. But a browser sends requests differently when your site and API have different domains , and then CORS occurs and the browser automatically:

• sets header Host=example.com (yours as API)
• sets header Origin=http://my-site.local:8088 (your site)

(The header Referer has the same value as Origin ). And now in Chrome's Console & Networks tab you will see:

When you have Host != Origin this is CORS, and when the server detects such a request, it usually blocks it by default .

Origin=null is set when you open HTML content from a local directory, and it sends a request. The same situation is when you send a request inside an <iframe> , like in the below snippet (but here the Host header is not set at all) - in general, everywhere the HTML specification says opaque origin, you can translate that to Origin=null . More information about this you can find here .

 fetch('http://example.com/api', {method: 'POST'});

 Look on chrome-console > network tab

If you do not use a simple CORS request, usually the browser automatically also sends an OPTIONS request before sending the main request - more information is here . The snippet below shows it:

 fetch('http://example.com/api', { method: 'POST', headers: { 'Content-Type': 'application/json'} });

 Look in chrome-console -> network tab to 'api' request. This is the OPTIONS request (the server does not allow sending a POST request)

You can change the configuration of your server to allow CORS requests.

Here is an example configuration which turns on CORS on nginx (nginx.conf file) - be very careful with setting always/"$http_origin" for nginx and "*" for Apache - this will unblock CORS from any domain (in production instead of stars use your concrete page adres which consume your api)

 location ~ ^/index\.php(/|$) { ... add_header 'Access-Control-Allow-Origin' "$http_origin" always; add_header 'Access-Control-Allow-Credentials' 'true' always; if ($request_method = OPTIONS) { add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above) add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin'; add_header 'Content-Length' 0; add_header 'Content-Type' 'text/plain charset=UTF-8'; return 204; } }

Here is an example configuration which turns on CORS on Apache (.htaccess file)

 # ------------------------------------------------------------------------------ # | Cross-domain Ajax requests | # ------------------------------------------------------------------------------ # Enable cross-origin Ajax requests. # http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity # http://enable-cors.org/ # <IfModule mod_headers.c> # Header set Access-Control-Allow-Origin "*" # </IfModule> # Header set Header set Access-Control-Allow-Origin "*" # Header always set Access-Control-Allow-Credentials "true" Access-Control-Allow-Origin "http://your-page.com:80" Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT" Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

Answer 10

Applying a CORS restriction is a security feature defined by a server and implemented by a browser .

The browser looks at the CORS policy of the server and respects it.

However, the Postman tool does not bother about the CORS policy of the server.

That is why the CORS error appears in the browser, but not in Postman.

Answer 11

The error you get is due to the CORS standard, which sets some restrictions on how JavaScript can perform ajax requests.

The CORS standard is a client-side standard, implemented in the browser. So it is the browser which prevent the call from completing and generates the error message - not the server.

Postman does not implement the CORS restrictions, which is why you don't see the same error when making the same call from Postman.

Why doesn't Postman implement CORS? CORS defines the restrictions relative to the origin (URL domain) of the page which initiates the request. But in Postman the requests doesn't originate from a page with an URL so CORS does not apply.

Answer 12

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.

Answer 13

Encountered the same error in different use case.

Use Case: In chrome when tried to call Spring REST end point in angular.

Solution: Add @CrossOrigin("*") annotation on top of respective Controller Class.

Answer 14

If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to * .

const express = require('express');
const request = require('request');

const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

app.get('/fetch', (req, res) => {
  request(
    { url: req.query.url },
    (error, response, body) => {
      if (error || response.statusCode !== 200) {
        return res.status(500).send('error');
      }
      res.send(body);
    }
  )
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`listening on ${PORT}`));

Above is a sample code( node Js required ) which can act as a proxy server. For eg: If I want to fetch https://www.google.com normally a CORS error is thrown, but now since the request is sent through the proxy server hosted locally at port 3000, the proxy server adds the Access-Control-Allow-Origin header in the response and there wont be any issue.

Send a GET request to http://localhost:3000/fetch?url= Your URL here , instead of directly sending the request to the URl you want to fetch.

Your URL here stands for the URL you wish to fetch eg: https://www.google.com

Answer 15

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

Answer 16

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>

Answer 17

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

Answer 18

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, eg, 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.

Answer 19

Solution & Issue Origins

You are making aXMLHttpRequest to different domains, example:

1. Domain one: some-domain.com
2. Domain Two: some-different-domain.com

This difference in domain names triggers CORS ( Cross-Origin Resource Sharing ) policy called SOP ( Same-Origin Policy ) that enforces the use of same domains (hence Origin ) in Ajax , XMLHttpRequest and other HTTP requests.

Why did it work when I made the request via the Chrome extension Postman?

A client (most Browsers and Development Tools ) has a choice to enforce the Same-Origin Policy.

Most browsers enforce the policy of Same-Origin Policy to prevent issues related to CSRF ( Cross-Site Request Forgery ) attack.

Postman as a development tool chooses not to enforce SOP while some browsers enforce, this is why you can send requests via Postman that you cannot send with XMLHttpRequest via JS using the browser.

Answer 20

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")}
});

Answer 21

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

Answer 22

put this in front of your url: https://cors-anywhere.herokuapp.com/

so for example: https://cors-anywhere.herokuapp.com/https://www.ndbc.noaa.gov/data/realtime2/46258.txt

Answer 23

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. 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();
}

Answer 24

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();
    }

Answer 25

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

Answer 26

If your server is a Springboot App then please add this annotation in your rest controller at the top - @CrossOrigin

It should work now . Thanks

Answer 27

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.

Answer 28

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.

Answer 29

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: *'); ?>

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:

$.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 work fine.

Answer copied and pasted from NizarBsb

Answer 30

For 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 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 the 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 .

Answer 31

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);

Answer 32

In a JSONP request you should catch "jsonpCallback" and send it back:

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

On the backend side (if you use PHP as backend):

echo $_GET['callback'].'({"ip":"192.168.1.1"})';

In this case, the backend response is like:

jQuery331009526199802841284_1533646326884({"ip":"192.168.1.1"})

But you can set a "jsonpCallback" manually on the frontend and catch it on the backend side:

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      jsonpCallback: 'get_ip',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

In this case the backend response is like:

get_ip({"ip":"192.168.1.1"})

Answer 33

Only for .NET Core Web API project, add following changes:

1. Add the following code after the services.AddMvc() line in the ConfigureServices() method of the Startup.cs file:

services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });

2. Add the following code after app.UseMvc() line in the Configure() method of the Startup.cs file:

app.UseCors(options => options.AllowAnyOrigin());

3. Open the controller which you want to access outside the domain and add this following attribute at the controller level:

[EnableCors("AllowOrigin")]

Answer 34

用于浏览器测试目的：Windows - 运行：

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

Answer 35

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: *'); ? <?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.

Answer 36

You might also get this error if your gateway timeout is too short and the resource you are accessing takes longer to process than the timeout. This may be the case for complex database queries etc. Thus, the above error code can be disguishing this problem. Just check if the error code is 504 instead of 404 as in Kamils answer above or something else. If it is 504, then increasing the gateway timeout might fix the problem.

In my case the CORS error could be removed by disabling the same origin policy (CORS) in the IE browser, see How to disable same origin policy Internet Explorer . After doing this it was a pure 504 error in the log.

Answer 37

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.

Answer 38

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

Answer 39

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.

Answer 40

For completeness, Apache allows 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"

Answer 41

Reposting my answer the moderators deleted. As I noted, the OP's exact error was fixed by this. At least 7 other people agreed it was a valid solution before this answer was deleted.

Moderators: Please consider the value of possibly helping 1 person solve an issue caused by something external. The javascript message is still nearly useless in debugging this particular problem. This thread is still a top search result for the OP's exact error message.

Deleted answer follows:

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.

Answer 42

To resolve this issue write this line of code in your doGet() or doPost() function whichever you are using in backend

response.setHeader("Access-Control-Allow-Origin", "*");

Instead of "*" type in the website or api url endpoint which is accessing the website.

Answer 43

Your IP is not whitelisted so you are getting this error. Ask the backend staff to whitelist your ip for the service you are accessing https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

Answer 44

"The quickest fix you can make is to install the moesif CORS extension: https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc/related?hl=en-US

Once installed, click it in your browser to activate the extension. Make sure the icon's label goes from “off” to “on”:

Then refresh your application, and your API requests should now work!"

Answer 45

it works for me by applying this middleware in globally

header('Access-Control-Allow-Origin', '*') ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS') ->header('Access-Control-Allow-Headers', "Accept,authorization,Authorization, Content-Type"); } }

Answer 46

For me I got this issue for different reason, the remote domain was added to origins the deployed app works perfectly except one end point I got this issue:

Origin https://mai-frontend.vercel.app is not allowed by Access-Control-Allow-Origin. Status code: 500

and

Fetch API cannot load https://sciigo.herokuapp.com/recommendations/recommendationsByUser/8f1bb29e-8ce6-4df2-b138-ffe53650dbab due to access control checks.

I discovered that my Heroku database table does not contains all the columns of my local table after updating Heroku database table everything worked well.

Answer 47

If you use .NET as your middle tier, check the route attribute clearly, for example,

I had issue when it was like this,

[Route("something/{somethingLong: long}")] //Space.

Fixed it by this,

[Route("something/{somethingLong:long}")] //No space

Answer 48

Mod note : This question is about why Postman is not subject to CORS restrictions in the same way an XMLHttpRequest is. This question is not about how to fix a "No 'Access-Control-Allow-Origin'..." error.

Please stop posting :

• CORS configurations for every language/framework under the sun. Instead find your relevant language/framework's question .
• 3rd party services that allow a request to circumvent CORS
• Command line options for turning off CORS for various browsers

---

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);
    });

Answer 49

Are you using Webfonts from Google, Typekit, etc? There are multiple ways you could use Webfonts like @font-face or CSS3 methods, some browsers like Firefox & IE may refuse to embed the font when it's coming from some non-standard 3rd party URL (like your blog) for same security reason.

In order to fix an issue for your WordPress blog, just put below into your .htaccess file.

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

Source : https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/