vue前端做跨域设置

《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)考论

    原文作者:成长小记
    原文地址: https://www.jianshu.com/p/04f173c9eac6
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞