尽管设置了标头,但 CORS 不起作用
Posted
技术标签:
【中文标题】尽管设置了标头,但 CORS 不起作用【英文标题】:CORS doesn't work despite headers set 【发布时间】:2017-09-29 11:50:01 【问题描述】:我有一个应用程序,客户端通过 https 使用 nginx 从 example.com 向 api.example.com 发出多部分请求,然后 api 将文件上传到 Amazon S3。
它可以在我的机器上运行,但是当其他人在不同的网络上尝试它时会中断。给我这个错误:
[Error] Origin https://example.com is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin https://example.com is not allowed by Access-Control-Allow-Origin. (graphql, line 0)
[Error] Fetch API cannot load https://api.example.com/graphql. Origin https://example.com is not allowed by Access-Control-Allow-Origin.
我在 API 上使用 cors npm 包,如下所示:
app.use(cors());
所有这些都通过 DigitalOcean 上的 Nginx 反向代理进行。这是我的 Nginx 配置:
/etc/nginx/conf.d/example.com.conf
和 /etc/nginx/conf.d/api.example.com.conf
的单独服务器配置,几乎相同,只是地址和名称不同:
server
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name example.com;
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
include snippets/ssl-params.conf;
location /
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:3000/;
proxy_ssl_session_reuse off;
proxy_set_header Host $http_host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
当我在我的计算机上的本地主机上使用它时,它工作得非常好,但是一旦我把它放在 DigitalOcean 上,我就无法上传。它只在我上传文件时中断这个多部分请求,其他常规 cors GET 和 POST 请求工作。
【问题讨论】:
第一个想法:你在这两种情况下都使用 https 吗?在这两种情况下,您登录或退出的方式相同吗? 【参考方案1】:问题原来是 Nginx 不接受大文件。将它放在我的 nginx 服务器配置的位置块中解决了我的问题:client_max_body_size 10M;
【讨论】:
【参考方案2】:问题可能与 nginx 无关,因为它只是一个移动问题。尝试使用,而不是 * for Access-Control-Allow-Origin,您也可以使用您的来源。
app.use(function(req, res, next)
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Authorization", "Access-Control-Allow-Headers", "Origin","X-Requested-With", "Content-Type", "Accept");
next();
);
更新
如果上述方法不起作用,请尝试以下操作,这暂时可以启用所有内容。
app.use(cors());
【讨论】:
执行此操作时出现Preflight response is not successful
错误。
来自浏览器?
是的,来自手机浏览器
@Vlady 更新启用了一切,如果它不起作用,我们可以安全地假设问题出在其他地方。
这是我的初始设置。无论如何感谢卡拉纳
以上是关于尽管设置了标头,但 CORS 不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Firefox 3 CORS XMLHTTPRequest 似乎不起作用