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"
  }
})

请教我应该从哪一方面去入手解决这个问题呢

讨论数量: 3

补充说明:目前我的问题一共涉及到四个域名,分别是中文vue的域名、中文后台接口域名;英文vue项目的域名、英文后台接口域名。但是只有一个打包好的vue项目能请求到后台的数据。

3年前 评论
cnguu

假设:

  • 前端域名:a.com
  • 统一请求前缀(不与路由冲突的前缀即可):a.com/api/

nginx 部分配置

.
.
.
location /api {
    proxy_pass 后端域名;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
.
.
.

这时,a.com 发出的请求是 a.com/api/...,属于同源,不跨域;a.com/api/... 转发到对应的接口,前后端联通

3年前 评论
cnguu (作者) 3年前

这里还缺少一些信息,也就是后端跨域的设置和实际 Option 跨域请求 时响应的跨域配置。

如果跨域设置合理,那么中文后台接口域名应该只允许中文 Vue 跨域访问,英文接口域名应该只允许英文 Vue 跨域访问,不想这么折腾就 拦截所有 OPTION 请求允许所有域名跨域访问 ,出现所述问题,可能是缓存,也可能是规则配置不合理。

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!