问题:
vue 静态页面部署在 http://dev.xxx.cn ,其中有页面会请求 http://foo.xxx.cn/upload ,这时候在浏览器看到 options 请求报错为
Access to XMLHttpRequest at 'http://foo.xxx.cn/upload/' from origin 'http://dev.xxx.cn' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://dev.xxx.cn, *', but only one is allowed.
但 foo.xxx.cn 所在的 nginx 端只设置了 一个 Access-Control-Allow-Origin,即
add_header 'Access-Control-Allow-Origin' '*'
后端 upload 服务也没有设置 Access-Control-Allow-Origin header 头
排查解决办法:
- 因为 http://dev.xxx.cn 和 http://foo.xxx.cn 放在同一台 nginx,所以会出现这个问题。把 http://foo.xxx.cn 或者 http://dev.xxx.cn 放在另外一台 nginx 就行了
或者 - 把 upload 这个 URI 配置在 http://dev.xxx.cn ,即 dev.xxx.cn 所在 nginx 添加一个 location /upload/ 转发到后端服务器,不通过 http://foo.xxx.cn/upload/,就不会有跨域问题了
网友评论