深的
在下面的 API 调查中，我使用http://example.com而不是您问题中的 http://myApiUrl/login ，因为第一个有效。我假设您的页面位于http://my-site.local:8088。
注意：API 和您的页面具有不同的域！
您看到不同结果的原因是 Postman：
- 设置标头
Host=example.com（您的 API）
- 未设置标题
Origin
- Postman 实际上根本不使用你的网站 url（你只需在 Postman 中输入你的 API 地址） - 他只向 API 发送请求，所以他假设该网站与 API 具有相同的地址（浏览器不会假设这一点）
这类似于当站点和 API 具有相同域时浏览器发送请求的方式（浏览器也设置 header item Referer=http://my-site.local:8088，但我在 Postman 中没有看到它）。当_未_Origin设置header时，通常服务器默认允许此类请求。
这是 Postman 发送请求的标准方式。但是，当您的站点和 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.您可以在此处找到有关此内容的更多信息。
fetch('http://example.com/api', {method: 'POST'});
Look on chrome-console > network tab
运行代码片段Hide results
展开片段
如果您不使用简单的 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)
运行代码片段Hide results
展开片段
您可以更改服务器的配置以允许 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;
}
}
Run code snippetHide results
Expand snippet
以下是在 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"
Run code snippetHide results
Expand snippet
