vue前端解决跨域

1,首先 axios请求，看后端接口路径，http://122.226.146.110:25002/api/xx/ResxxList，所以baseURL地址改成 ‘/api’

let setAxios = originAxios.create({baseURL: '/api',  //这里要改掉timeout: 20000 // request timeout});
export default setAxios;

2，然后ue.config.js在文件中

module.exports = {devServer: {open: true,host: 'localhost',//localhostport: 2500,https: false,disableHostCheck: true,//以上的ip和端口是我们本机的;下面为需要跨域的proxy: {//配置跨域'/api': {target: 'http://122.xxx.xxx.110:25002/',//这里后台的地址模拟的;应该填写你们真实的后台接口ws: true,changOrigin: true,//允许跨域pathRewrite: {'^/api': '/api'//请求的时候使用这个api就可以}}}},}

需要重新关闭开启项目

配置线上环境和开发环境同时使用

1.生产环境(production)和开发环境(development)配置
1).在根目录下建文件.env.production

NODE_ENV='production'
VUE_APP_MODE='production'
VUE_APP_API_URL='http://xxxxx' //上线nginx所在地址（处理跨域问题）

到时上线了，前端项目是以静态资源的形式放在nginx下，有nginx代理转发请求；因此前端写的请求地址写成nginx所在的地址，前端静态资源地址（nginx所在的地址）–>请求地址写nginx所在地址===看起来是同一个地址，因此不会存在跨域

注：请求地址虽然写的是nginx所在地址，但nginx会做转发代理到真实后端接口
2）在根目录下建文.env.development

NODE_ENV='development'
VUE_APP_MODE='development'
VUE_APP_API_URL='http://localhost:8081'

此段参考 ：https://blog.csdn.net/zhouzhou69/article/details/127482369

let URL = null

//配置Url 判断当前环境是生产环境还是开发环境

if (process.env.NODE_ENV !== ‘development’) {

//如果不为开发环境，则使用以下链接

URL = ‘xxxxxxxxx’

} else {

URL = ‘/api’

//使用proxy跨域指定的替代

}

const service = axios.create({

baseURL: URL,

responseType: ‘json’,

withCredentials: true,

CrossDomain: true

})

此段参考：https://blog.csdn.net/qq_20497071/article/details/109483669