为什么我的JavaScript代码会收到一个"；否'；访问控制允许原点'；标题出现在请求的资源上；错误，而邮递员没有？

Mod note：这个问题是关于为什么浏览器上的

XMLHttpRequest

/

fetch

/等受到相同的访问策略限制（提到CORB或CORS时会出现错误），而Postman不受限制。这个问题不是关于如何修复“No‘Access Control Allow Origin’…”错误的。这是关于它们为什么会发生的问题

请停止发布：

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

---

我正试图通过连接到内置服务器来进行授权。但是，当我发出请求时，我得到以下错误：

无法加载XMLHttpRequesthttp://myApiUrl/login. 请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“null”

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

这是请求代码：

$.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对象从远程服务器发送和接收数据，但它们受到同源策略的限制。扩展没有那么有限。扩展可以与其源站之外的远程服务器进行通信，只要它首先请求跨源站权限

警告：使用

访问控制允许来源：

会使您的API/网站容易受到（CSRF）攻击。在使用此代码之前，请确认您的身份

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

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

如果您使用的是与问题相同的选项；您必须首先安装

flask cors

$ pip install -U flask-cors

然后将烧瓶COR包括在您的应用程序中

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

有关详细信息，您可以查看。

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

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

对于C#web服务-

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

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

注意：如果您正在寻找从第三方网站下载内容，则这对您没有帮助。。您可以尝试以下代码，但不能使用JavaScript

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

---

在下面作为API的调查中，我使用了而不是来自您的问题，因为这是第一个有效的

我想你的页面已经打开了

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

• 设置标题

  Host=example.com

  （您的API）
• 未设置标题

  Origin

这类似于浏览器在站点和API具有相同域时发送请求的方式（浏览器还设置标题项

Referer）=http://my-site.local:8088

，但是我在Postman中没有看到它）。当未设置

源文件

标题时，通常默认情况下服务器允许此类请求。

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

• 设置标题

  Host=example.com

  （您的API）
• 设置标题

  原点=http://my-site.local:8088

  （您的站点）

（标题

Referer

的值与

Origin

的值相同）。现在在Chrome的控制台和网络选项卡中，您将看到：

当您有

主机！=Origin

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

当您从本地目录打开HTML内容并发送请求时，会设置

Origin=null

。在

中发送请求时也会出现同样的情况，如下面的代码段所示（但此处根本没有设置

主机

头）-一般来说，HTML规范所说的不透明原点的任何地方，您都可以将其转换为

origin=null

。有关这方面的更多信息，您可以找到

fetch（'http://example.com/api“，{method:'POST'}）；

---

查看chrome控制台>网络选项卡

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

浏览器查看服务器的CORS策略并尊重它

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

---

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

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

我就有这个问题,

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

用这个修好了,

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

---

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

用例：在尝试调用SpringREST端点时，使用chrome

解决方案：在各自控制器类的顶部添加@CrossOrigin（“*”）注释

---

仅适用于.NET核心Web API项目，

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

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

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

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

[EnableCors("AllowOrigin")]

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

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