CORS 访问阻塞

Question

我可能需要一些帮助。

我试图与 XMLHttpRequest 建立从 JavaScript 到另一个来源的 PHP 脚本的连接。

我注意到的第一件事是，我从这个请求中收到了一个错误，告诉我缺少标头。我搜索了一下，发现this documentation。我修改了这样的标题：

JS

//this.mozSystem = true;
this.open("POST", url, true);
this.setRequestHeader("Content-type", "application/json");
this.setRequestHeader("ADDON-TO-SERVER", "");
this.setRequestHeader("Content-length", massage.length);
this.setRequestHeader("Connection", "close");

PHP

header("Content-type: application/json");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Request-Method: POST");
header("Access-Control-Allow-Headers: ADDON-TO-SERVER,Content-type");

而且它有效......但我不知道为什么在

header("Access-Control-Allow-Headers: ADDON-TO-SERVER,Content-type");

需要Content-type。

Mozilla 告诉我添加这个，但我认为它只需要一个自定义标题，Content-type 不是基本的吗？

谁能告诉我为什么需要这样做，并告诉我我是否按照预期做了所有事情。

感谢您的帮助， 费雷尔

Answer 1

就 CORS 上下文中的标头而言，值为 application/json 的 Content-type 请求标头不被视为“基本标头”（借用您的措辞）。

在 CORS 上下文中，Content-type 请求标头仅在其值为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 时才被视为“基本”。

因此，只有当您发送该请求的服务器明确表示可以接收此类请求时，您的浏览器才会允许来自您的 Web 应用程序的 Content-type: application/json 请求按预期工作。服务器执行此操作的方式是使用包含Content-type 的Access-Control-Allow-Headersheader 响应。

您的浏览器强制执行该限制的基本原理是，除非服务器明确指出可以处理某些类型的跨域请求，否则 CORS 不会允许 Web 应用程序执行任何类型的编程跨域请求除了基本的 HTML form-element 操作始终能够进行跨域之外的任何事情。

因此，自从 CORS 出现之前，HTML 页面一直仅限于发送 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 跨域请求，这就是基本 CORS 行为的限制，除非服务器选择- 了解更多。