Vue跨域问题（踩坑指南）

Vue跨域问题（踩坑指南）

在刚开始学习vue的时候，大家肯定都遇到过很多大大小小的问题，下面是我的爬坑记录-------vue跨域问题

一、开发环境配置

在vue.config中，配置以下内容

module.exports={
    devServer:{
        host:'localhost',
        port:'8080',
        open:true,
        proxy:{
          "/api": {
            target: "http://www.baidu.com",  // api地址
            ws: true, // 代理的WebSockets
            changeOrigin: true, // 允许websockets跨域
            pathRewrite: {
              "^/api": ""
            }
          }
        },
    }
}

配置完成后，在axios请求前面加上/api，api地址会代理成http://www.baidu.com/xxx/xxx
例如：

这时，开发环境的跨域问题就解决了

二、生产环境的配置

先将项目打包npm run build,然后上传到服务器
如果你使用的宝塔面板，配置更加简单
linux服务器配置跟宝塔一样，只不过宝塔提供了可视化操作

nginx配置

location /{
      root /www/wwwroot/demo;
      index index.html;
    }
    location /api {
      add_header 'Access-Control-Allow-Origin' '*';
      proxy_pass http://www.baidu.com/; 
    }  

注意：proxy_pass地址后面一定要加“/”,否则

最后，生产环境配置完成，祝大家爬坑顺利，有问题欢迎留言