jquery为什么我的JavaScript代码收到“No'AccessControlAllowOrigin'头出现在请求的资源上”错误，而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

---

我试图通过连接到内置的RESTful{a3}{a4}来使用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.

我知道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);
    });

Answer 1

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

两者都不同。邮递员恰当地称呼“POST”，但当我们称呼它时，它将是“选项”

对于C#web服务-Web API

请在网站中添加以下代码。在<；下配置文件；系统网络服务器>；标签这将有助于：

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

Answer 2

如果我理解正确的话，您正在对一个不同的域执行XMLHttpRequest，而不是您的页面所在的域。因此，浏览器正在阻止它，因为出于安全原因，它通常允许同一来源的请求。当您想要执行跨域请求时，您需要执行一些不同的操作。关于如何实现这一点的教程是Using CORS

当您使用邮递员时，他们不受本政策的限制。引自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 3

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

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

但是，Postman工具并不关心服务器的CORS策略

这就是为什么CORS错误会出现在浏览器中，而不会出现在Postman中

Answer 4

在下面作为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头未设置时，通常默认情况下服务器允许此类请求

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

• 设置头Host=example.com（您的作为API）
• 设置标题Origin=http://my-site.local:8088（您的站点）

（头Referer的值与Origin的值相同）。现在在Chrome的控制台&；网络选项卡您将看到：

当您有Host != Origin时，这是CORS，当服务器检测到这样的请求时，通常默认情况下会阻止它

Origin=null是在从本地目录打开HTML内容时设置的，它会发送一个请求。同样的情况是，当您在<iframe>内发送请求时，如下面的代码段中所示（但这里根本没有设置Host头）-一般来说，只要HTML规范说源代码不透明，您就可以将其转换为Origin=null。关于这方面的更多信息，您可以找到here

&13； 第13部分,；

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

；

Look on chrome-console > network tab

；

和#13；