vue项目打包之后出现跨域的问题
如题,我有一个项目,前端 vue,后端 tp5.1,
事情是这样的,我的项目是中英日三语的,为了省事,我使用一套中文,一套英文,一套日文的方案解决,
一开始做中文的,后台使用 vue 涉及到跨域问题在 tp5 后端解决了,
现在要复制一套英文版出来,vue 和 tp5 后端复制完改完文字,包括 vue 的请求地址,打包 vue 之后报错提示跨域,中文的没有问题,
然后我又重新本地把中文的 vue 项目改成英文的接口地址后再重新打包上传,可以请求英文的后台地址,OK,英文的跨域报错解决了,然而!!!当我把本地的 vue 项目请求地址再改回中文后台后,中文后台提示跨域
关键位置代码附上
中文版 vue 源码,请求接口地址是 www.test.com
const request = axios.create({
baseURL:'http://www.test.com', //改的地方就是这里。我没有使用反向代理
timeout:5000,
headers:{
'X-Requested-With': 'XMLHttpRequest',
"content-type": "application/x-www-form-urlencoded"
}
})
英文版源码,请求接口是 en.admin.com
const request = axios.create({
baseURL:'http://www.test.com', //关键代码就这一句吧
timeout:5000,
headers:{
'X-Requested-With': 'XMLHttpRequest',
"content-type": "application/x-www-form-urlencoded"
}
})
请教我应该从哪一方面去入手解决这个问题呢
补充说明:目前我的问题一共涉及到四个域名,分别是中文 vue 的域名、中文后台接口域名;英文 vue 项目的域名、英文后台接口域名。但是只有一个打包好的 vue 项目能请求到后台的数据。
假设:
nginx 部分配置
这时,a.com 发出的请求是 a.com/api/...,属于同源,不跨域;a.com/api/... 转发到对应的接口,前后端联通
这里还缺少一些信息,也就是后端跨域的设置和实际
Option 跨域请求
时响应的跨域配置。如果跨域设置合理,那么中文后台接口域名应该只允许中文 Vue 跨域访问,英文接口域名应该只允许英文 Vue 跨域访问,不想这么折腾就
拦截所有 OPTION 请求允许所有域名跨域访问
,出现所述问题,可能是缓存,也可能是规则配置不合理。