当我的JavaScript代码出现时，为什么Postman不会出现“在请求的资源上没有'Access-Control-Allow-Origin'标头”错误？

注释：这个问题是关于为什么Postman不受XMLHttpRequest一样的CORS限制。此问题不是关于如何解决“无'Access-Control-Allow-Origin'...”错误。

请停止发布：

• 阳光下每种语言/框架的CORS配置。而是找到您相关的语言/框架的问题。
• 允许绕过CORS的请求的第三方服务
• 用于关闭各种浏览器的CORS的命令行选项

我正在尝试通过连接到内置的RESTful API Flask使用JavaScript进行授权。但是，当我发出请求时，出现以下错误：

XMLHttpRequest无法加载http：// myApiUrl / login。所请求的资源上没有“ Access-Control-Allow-Origin”标头。因此，不允许访问原始“空”。

我知道API或远程资源必须设置标头，但是当我通过Chrome扩展程序Postman发出请求时，为什么它可以工作？

这是请求代码：

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

如果我理解正确，那么您正在向页面所在的其他域执行XMLHttpRequest。因此，由于安全原因，浏览器通常会阻止来自同一来源的请求，因此阻止了它。当您想进行跨域请求时，需要做一些不同的事情。有关如何实现此目标的教程是使用CORS。

使用邮递员时，它们不受此政策的限制。引用自跨域XMLHttpRequest：

常规网页可以使用XMLHttpRequest对象从远程服务器发送和接收数据，但是它们受同一原始策略的限制。扩展不受限制。扩展可以在其起源之外与远程服务器通信，只要它首先请求跨域许可。

警告：使用Access-Control-Allow-Origin: *会使您的API /网站容易受到跨站点请求伪造（CSRF）攻击。在使用此代码之前，请确保您了解风险。

如果您使用的是PHP，则非常简单。只需在处理请求的PHP页面的开头添加以下脚本：

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

如果您正在使用节点红色的，你必须让CORS中node-red/settings.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: "*",
 methods: "GET,PUT,POST,DELETE"
},

如果您使用Flask与问题相同；您必须先安装flask-cors

$ pip install -U flask-cors

然后在您的应用程序中包括Flas cors。

from flask_cors import CORS

一个简单的应用程序将如下所示：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

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

有关更多详细信息，您可以查看Flask文档。

因为
$ .ajax（{type：“ POST” -调用选项
$ .post（ -调用POST

两者是不同的。邮递员正确地称呼“ POST”，但是当我们称呼它为“ OPTIONS”时。

对于C＃Web服务-Web API

请在<system.webServer>标记下的web.config文件中添加以下代码。这将起作用：

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

请确保您在Ajax调用中没有做任何错误

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

注意：如果您要从第三方网站下载内容，那么这将无济于事。您可以尝试以下代码，但不能尝试JavaScript。

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");

应用CORS限制是由服务器定义并由浏览器实现的安全功能。

浏览器查看服务器的CORS策略并遵守该策略。

但是，邮递员工具不会打扰服务器的CORS策略。

这就是CORS错误出现在浏览器中而不出现在Postman中的原因。

在下面的API调查中，我使用http://example.com而不是您的问题中的http：// myApiUrl / login，因为第一个有效。

我认为您的页面位于http：//my-site.local：8088上。

您看到不同结果的原因是邮递员：

• 设置标头Host=example.com（您的API）
• 未设置标题 Origin

当站点和API具有相同的域时，这类似于浏览器发送请求的方式（浏览器也设置了标头项目Referer=http://my-site.local:8088，但我在Postman中看不到它）。如果Origin头没有设置，通常服务器默认允许这样的请求。

这是Postman发送请求的标准方式。但是，当您的站点和API具有不同的域时，浏览器发送请求的方式会有所不同，然后发生CORS，浏览器会自动：

• 设置标头Host=example.com（您以API的形式）
• 设置标题Origin=http://my-site.local:8088（您的网站）

（标头Referer的值与相同Origin）。现在，在Chrome的“ 控制台和网络”标签中，您将看到：

当拥有Host != OriginCORS时，并且服务器检测到此类请求时，通常默认情况下将其阻止。

Origin=null当您从本地目录打开HTML内容时设置，并发送请求。同样的情况是，您在内发送请求<iframe>（如下面的代码片段所示（但此处Host根本未设置标头））-通常，在HTML规范说不透明来源的任何地方，都可以将其转换为Origin=null。有关此的更多信息，请参见此处。

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

Look on chrome-console > network tab

如果您不使用简单的CORS请求，通常浏览器会在发送主请求之前自动发送一个OPTIONS请求-更多信息在这里。下面的代码片段显示了它：

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)

您可以更改服务器的配置以允许CORS请求。

这是一个在nginx（nginx.conf文件）上打开CORS的示例配置-请谨慎设置always/"$http_origin"nginx和"*"Apache-这将阻止来自任何域的CORS。

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

这是一个在Apache上打开CORS的示例配置（.htaccess文件）

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

在不同的用例中遇到相同的错误。

用例：在Chrome中，当尝试以角度调用Spring REST端点时。

解决方案：在相应的Controller类顶部添加@CrossOrigin（“ *”）批注。

如果您使用.NET作为中间层，请清楚检查route属性，例如，

我有这样的问题

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

通过此修复，

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

仅对于.NET Core Web API项目，添加以下更改：

1. 在Startup.cs文件services.AddMvc()的ConfigureServices()方法中的该行之后添加以下代码：

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

2. 在Startup.cs文件app.UseMvc()的Configure()方法中，在行后添加以下代码：

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

3. 打开要在域外部访问的控制器，并在控制器级别添加以下属性：

[EnableCors("AllowOrigin")]