vue前端跨域

为什么前端跨域

之前项目都是用的laravel后端跨域(laravel后端跨域文章链接:https://www.jianshu.com/p/9dc67d9276b8),这种后端跨域的原理是在后端处理完请求之后,给返回加上允许跨域的头信息。这种跨域方式存在一个问题就是如果程序在请求处理过程发生错误终止执行,自然也不会返回,前端没有收到允许访问的header头信息,就会接着报cors跨域。

解决方式:采用前端跨域

第一步:在config/index.js文件配置代理,找到proxyTable字段

   proxyTable: {
      '/api': {
        target: '',//后端接口域名地址
        // secure: false, // 如果是https接口,需要配置这个参数
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
},

第二步:在main.js中加入判断线上和本地的代码(如果不做判断,打包之后线上接口404)

let baseUrl = ""
if(process.env.NODE_ENV == 'production'){
  baseUrl = ""//后端接口域名地址与步骤一target一致
}else{
  baseUrl = "/api"
}

第三步:axios请求url直接使用(baseUrl+路由)访问就可以了

推荐阅读更多精彩内容