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，然后vue.config.js在文件中

module.exports = {
  
    devServer: {
        open: true,
        host: 'localhost',//localhost
        port: 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 = 'http://122.xxx.xxx.110:25002/' //后端地址

} 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

这段也写的非常好 都是一种意思，详情请查看
此段转载文章 https://blog.csdn.net/takobee5411/article/details/131100558