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

Question

Mod note ：这个问题是关于为什么 XMLHttpRequest / fetch /etc。浏览器上的受相同访问策略限制（您会收到提及 CORB 或 CORS 的错误），而 Postman 则不受此限制。这个问题 不是 关于如何修复“No ‘Access-Control-Allow-Origin’…”错误。这是关于它们发生的原因。

请停止发帖：

• 日光下每种语言/框架的 CORS 配置。而是 找到您的相关语言/框架的问题。

• 允许请求规避 CORS 的 3rd 方服务

• 用于关闭各种浏览器的 CORS 的命令行选项

---

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

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

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

原文由 Mr Jedi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

当您使用 Postman 时，它们不受此政策的限制。引用自 跨域 XMLHttpRequest ：

常规网页可以使用 XMLHttpRequest 对象从远程服务器发送和接收数据，但它们受到同源策略的限制。扩展并没有那么有限。扩展程序可以与其源之外的远程服务器通信，只要它首先请求跨域权限。

原文由 MD. Sahib Bin Mahboob 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

如果您使用的是 Node-red ，则必须通过取消注释以下行来在 node-red/settings.js 文件中允许 CORS ：

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

然后在您的应用程序中包含 Flask 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 文档。

原文由 Shady Mohamed Sherif 发布，翻译遵循 CC BY-SA 4.0 许可协议