在vue框架开发中如何解决跨域问题

反向代理解决跨域

如上图所示的爆红代码，则就是出现了，跨域问题

如何解决跨域

反向代理

1.打开（新建）项目根/vue.config.js

​ 写上如下代码：

module.exports = {
  devServer:{
    //设置代理
    proxy: { //代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
      '/api': { //axios访问 /api ==  target + /api
       		 target: 'http://localhost:3001',//http://localhost:3001'为要访问的路径
       		 changeOrigin: true, //创建虚拟服务器 
          	pathRewrite: {
        			 	 '^/api': ''    //重写接口，去掉/api， 在代理过程中是否替换掉/api/路径 
     		}
      	}
      }
   }
}
 

注意：一旦修改了配置（vue.config.js），必须重启服务器（npm run serve）