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地址后面一定要加“/”,否则
在这里插入图片描述
最后,生产环境配置完成,祝大家爬坑顺利,有问题欢迎留言

Logo

前往低代码交流专区

更多推荐