Vue 配置代理以解决跨域问题

前言

跨域一直是一个在开发中很让人头疼的问题,解决跨域的方式有很多,后端和前端都有自己的解决方式,后端的话主要是在响应头里面添加信息,而前端主要是以代理的方式去进行解决,说白了就是将我们发送的请求交给跟我们同源的服务器,然后由他来做一个中转。其实,vue的代理是 借助vue静态服务器来实现的,使用的是 http-proxy-middleware 这个模块。
原理大概就是这样,配置起来其实还是蛮简单的。

在vue.config.js中配置

假设我们的项目运行在localhost:3000上,现在我们想发送请求到localhost:8000

module.exports = {
    proxy: {
      "/api": {
        // 以 “/api” 开头的 代理到 下边的 target 属性 的值 中
        target: http://localhost:8000,
        changeOrigin: true, // 是否改变域名
        ws: true,
        pathRewrite: {
          // 路径重写(以正则的规则去写)
          "^/api": "" 
        }
      }
    }
};

注意:关于路径重写,它的作用我们可以举一个例子来理解,上面我们配置的代理,会将所有已/api开头的请求给拦截,由代理服务器发送到8000端口上,这个/api是为了让我们区分请求是否需要代理而加上去的,8000端口上的实际接口倘若不是以/api开头的话,那么必然会报404,所以我们要将/api给替换为空字符串才可以

当我们需要向多台服务器进行代理时,可按照以下方式配置代理

module.exports = {
    proxy: {
      "/api1": {
        // 以 “/api1” 开头的 代理到 下边的 target 属性 的值 中
        target: http://localhost:8000,
        changeOrigin: true, // 是否改变域名
        ws: true,
        pathRewrite: {
          // 路径重写(以正则的规则去写)
          "^/api1": "" 
        }
      },
      "/api2": {
        // 以 “/api2” 开头的 代理到 下边的 target 属性 的值 中
        target: http://localhost:8001,
        changeOrigin: true, // 是否改变域名
        ws: true,
        pathRewrite: {
          // 路径重写(以正则的规则去写)
          "^/api2": "" 
        }
      }
    }
};

参考: https://blog.csdn.net/qq_36407748/article/details/90679991

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页