vue 打包部署后 如何解决其他域名的跨域问题

[xijitech]

vue 打包部署后 如何解决其他域名的跨域问题

[shifuchen]

你好，抱歉没能理解您的问题，麻烦您更详细地描述一下您的情况，比如项目想要提供什么功能、目前遇到的障碍、预期的结果等等。谢谢！

[xijitech]

vue-cli 项目打包后线上（绑定域名） 在请求另外一个项目（不同域名） 跨域问题怎么解决
传统项目Nginx 反向代理可以解决

[shifuchen]

可以写一个代理程序（用 Express 做就行），在里面编写 API 来请求「另外一个项目」并将得到的结果进行返回，同时借助 cors 对相关 API 进行配置以使得您的 Vue 项目可以正常访问这些 API 而不会遇到跨域问题。这个代理程序也可以部署在云引擎上（可以部署到同一个应用的不同分组）。

[xijitech]

我就是这么做的 就是有跨域问题 express应用已经配置cors var app = express();
app.use(cors())（域名1）
但是VUE打包后绑定的新域名（域名2） 请求这个 express应用的API接口（域名1）就会跨域访问不了
现在的做法就是把vue打包好的静态文件合并的express下(域名1）不存在跨域
我得需求 现在是(域名2)需要请求域名（1） serve可以配置反向代理吗 如同vue cli 本地一样 static.json

[shifuchen]

如果 Express 应用的 CORS 配置无误的话是不应该导致 Vue 应用访问不了的。可以观察下访问 Express 应用时响应的 Headers 中是否有 access-control-allow-origin 这一项，以及它的值是什么。

[xijitech]

这是express响应 本地测试环境都可以 其他域名也是

[xijitech]

我们现在 云引擎 web端项目 用的是serve吧 请问一下怎么配置反向代理？

[xijitech]

这是vue打包后请求其他域名 前端在排查问题

[xijitech]

前端axios 配置完也是一样 解决不了跨域

[shifuchen]

是否方便提供下 Express 应用和/或 Vue 应用的访问地址，我们这边测试一下？如果地址不方便公开，可以私信发给我。

[xijitech]

已经发你私信了

[shifuchen]

这边看到 Vue 应用发送请求时遇到的错误信息为：

Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

意味着您需要在 Express 应用那边向 cors 传入配置来指定接受的请求源头（不传配置的话默认就会是 *）。

具体可参考 Express 文档。

[xijitech]

Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

我试试看 谢谢

[shifuchen]

可以参考下这篇文档：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials

[xijitech]

搞定了，credentials true 情况下 vue客户端需要配置 axios.defaults.withCredentials= true 需要填写指定域名

const corsOptions = {
"origin": "url链接",
"methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
"preflightContinue": false,
"optionsSuccessStatus": 204,
"credentials":true
}

credentials false 情况下 vue客户端需要配置 axios.defaults.withCredentials= false "origin": "*" 可以为通配符
const corsOptions = {
"origin": "*",
"methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
"preflightContinue": false,
"optionsSuccessStatus": 204,
"credentials":false
}
app.use(cors(corsOptions))

---

或者 app.use(cors())