[英]Why does my JavaScript get a “No 'Access-Control-Allow-Origin' header is present on the requested resource” error when Postman does not?

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:

我正在尝试通过连接在Flask中构建的RESTful API来使用JavaScript进行授权。然而,当我提出请求时,我得到如下错误:

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:


    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    .done(function( data ) {
    .fail( function(xhr, textStatus, errorThrown) {

35 个解决方案



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.




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.




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



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.




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


  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.




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:

如果你使用的是Node-red,你必须允许在Node-red /设置中使用CROS。js文件不评论以下几行:

// 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: "*",



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



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.




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

More information: CORS on ExpressJS




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

对于c# web服务—webapi。

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

请在您的网站上添加以下代码。配置文件在 <系统。网络服务器> 标记。这将工作

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

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




    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) {
    error: function () {

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

角度4的问题请参考:http://www.hubfly.com/blog/solutions/howto -fix- Angular -4-api-call-issue /。

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



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.

概要:纯JavaScript CORS替代/polyfill。不需要服务器配置——只需添加一个代理。在您希望与之通信的域上的html。这个库使用XHook来钩住所有XHR,所以XDomain应该与任何库一起工作。



If you do NOT want to:


  1. Disable web security in Chrome
  2. 在Chrome中禁用网络安全。
  3. Use JSONP
  4. 使用JSONP
  5. Use a third party site to re-route your requests
  6. 使用第三方站点来重新路由您的请求。

and you are sure that your server has CORS enabled then (test CORS here: http://www.test-cors.org/)

并且您确定您的服务器已经启用了CORS(在这里测试CORS: 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.

编辑功能向不同的域发送GET & POST请求,以获取数据。我设置了原点参数来解决这个问题。后端是mediaWiki引擎。

tldr: Add "origin" parameter to your calls which must be the Origin parameter that your browser sends (you cannot spoof the origin parameter)




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.

当我使用AngularJS访问我的API时,我遇到了一个问题。在SoapUI 5.0和ColdFusion中也有同样的请求。我的GET方法已经有了accesscontrol - control - allow- origin头。

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">        



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:


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



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




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

    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    'dataType': 'jsonp',
    'success': function(response) {

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

这里有一个与解释相关的链接:https://vverma.net/fetchany-jsonp -jsonp- 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:


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,



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

在我的例子中,我使用JEE7 JAX-RS应用程序,并且下面的技巧非常适合我:

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



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.

这里提到的与其他开放代理(一对夫妇至少不似乎不再可用),它的工作方式是,而不是直接发送一个请求到您的客户端代码,例如,http://foo.com你将它发送给https://cors-anywhere.herokuapp.com/http:/ / foo.com和代理添加必要的访问控制- *头响应浏览器看到。



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 "*"


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



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.

很多时候,从javascript到php api都有这种情况,原因有几个。我忘了写

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.




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.

在我们的例子中,我们可以看到一些请求,使它能够服务于我们的服务,但并不是站点发送的数量。这指向了CDN。我们能够返回并看到原始请求是由直接请求提供的,而不是浏览器AJAX调用的一部分,也不包括响应头访问控制允许来源。显然,CDN缓存了这个值。Akamai CDN配置调整以考虑源请求头值作为匹配的一部分,似乎使它为我们工作。



For the GoLang API:

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.

首先,你可以看看MDN CORS Doc了解CORS是什么。据我所知,CORS是关于是否允许请求的来源访问服务器资源。

And you can restrict which request origin can access the server by setting Access-Control-Allow-Origin at Header of Server Response.

您可以通过在服务器响应的头设置访问控制- allow- origin来限制哪个请求源可以访问服务器。

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

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");
        var response = JSON.parse(xhttp.response);
    catch (error) {

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




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.

CORS是“跨源资源共享”,是发送跨域请求的一种方式。现在XMLHttpRequest2和Fetch API都支持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.

如果您使用的是现代浏览器(> Internet Explorer9、Chrome、Firefox、Edge等),建议您使用一个简单但漂亮的组件,https://github.com/Joker-Jelly/catta。它没有依赖项,小于3kb,它支持Fetch、Ajax和JSONP,具有相同的死简单语法和选项。

catta('./data/simple.json').then(function (res) {

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




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

var script = document.createElement('script');



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




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

对于application_controller中的Ruby on Rails服务器。rb,添加:

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'] = '*'



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

注2:测试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.




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.

只是提到另一种“绕过”it - AJAX代理的方法。将请求发送到服务器,以从另一个源获取数据,并将请求发回给您。

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




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


     <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" />  

Big thanks to this video.




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

我解决了这个问题,通过为客户端URL访问web API启用了CORS,并且成功地工作了。

For example:


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



No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://sx.xyz.com' is therefore not allowed access.


I had also faced a similar problem with Cross Domain Data Exchange in the Ajax response as error undefined. But the response in header was Status Code:200 OK

我也遇到过类似的问题,在Ajax响应中跨域数据交换作为未定义的错误。但是header中的响应是状态代码:200 OK。

Failed to load https://www.Domain.in/index.php?route=api/synchronization/checkapikey:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://sx.xyz.in' is therefore not allowed access.

The solution to get around it: In my case it was to call the function checkapikey() via Ajax to another domain and get the response with data to where the call has been made:


if (($this->request->server['REQUEST_METHOD'] == 'POST') && isset($this->request->server['HTTP_ORIGIN'])) {

        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_ORIGIN']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

        $headers = getallheaders();



粤ICP备14056181号  © 2014-2020 ITdaan.com