vue前端做跨域设置

跨域截图

最近一些朋友问我，vue的前端能不能做跨域？之前每次前端和后台调接口的时候都很麻烦。要什么后台做跨域支持什么？有的后台技术差点的还不会做这个，还有脾气不好的还不给你搞。

还有时候还在开发阶段的时候，后台代码没有上传服务器在公司的时候还能调试，但是回到家后，就不能调试了非常的不灵活。

其实vue他是有个内置的小型server，你可以在配置文件里，配置你的跨域地址。废话不多说直接代码看
vue版本是在2.5.2之前的（包括这个版本的）你要在build的文件夹下的webpack.dev.conf.js文件下devServer:{}里加上：

proxy: {
      '/api': {    //自定义
          target: 'https://你的服务器地址/api', //这里可以跟随项目实际部署服务器来
          changeOrigin: true,
          ws: true,
          pathRewrite: {
              '^/api': '' //自定义
          }
      }
  }

2.5.2以上的版本是要自己在根目录里建立：vue.config.js文件然后：

module.exports = {
  devServer: {
    proxy: {
      "/api": { //自定义
        target: "http://你的服务器地址/api", //这里可以跟随项目实际部署服务器来
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""//自定义
        }
      }
    }
  }
}

这样就完全不需要后台去做跨域的设置，前端完全能搞定，记得配置完成后，要重启下项目，配置才会生效。
如果你还有其他的招数非常欢迎你来找我（微信号：nihaomeili87）考论