vue项目配置代理如何解决跨域问题

目录

• Vue项目配置代理
• 1. 这里以axios发请求为例
• 2. 如果发送的请求都以 /abc 开头
• 3. 代理多个接口
• 什么是跨域？
• 配置（vue.config.js）
• 总结

Vue项目配置代理

前端向服务器发送请求时，经常会遇到跨域问题，那么什么是前端跨域呢？

在vue项目中如何利用代理解决呢？

1. 这里以axios发请求为例

axios.get("/abc/def");
    axios.get("/abc/ghi");
    axios.post("/abc/jkm");
    

axios发送的请求是本地的服务器地址拼接上发送的请求，如 http://localhost:8080/abc/def

2. 如果发送的请求都以 /abc 开头

那么我们就可以在Proxy中进行服务器代理配置。

devServer: {
    PRoxy: {
      "/abc": {
        target: "http://XX.XX.XX.XX:8081",        changeOrigin: true,        ws: true,        secure: false,      }
,    }
,}
,

"/abc":{ } : 引号中代表监测的是以 /abc 开头的接口

target : 代表监测到以 /abc 开头的接口后，把axios请求中前面的本地服务器地址改为后端接口地址，实际发送给后端的请求就是下方后一个请求

http://localhost:8080/abc/def --> http://XX.XX.XX.XX:8081/abc/def

• changeOrigin : 是否跨域
• ws : 如果要代理 websockets，配置这个参数
• secure : 如果是https接口，需要配置这个参数（如果是http接口，也可以不写这个参数）
• pathrewrITe ：替换请求中匹配的内容。在3的方法2中详细解释用法，上方未使用此参数

3. 代理多个接口

http://localhost:8080/zzz/one

http://localhost:8080/xxx/two

方法1：监测多个接口，可以在Proxy中写多个配置：（适用于target不同的代理，相同也可以用这个方法，就是会麻烦一点，对于相同的target方法2会比较方便）

devServer: {
    proxy: {
        "/zzz": {
          target: "http://XX.XX.XX.XX:8082",          changeOrigin: true,          ws: true,        }
,        "/xxx": {
          target: "http://XX.XX.XX.XX:8083",          changeOrigin: true,          ws: true,        }
,    }
,}
    ,

那么实际发送给后端的请求就是：

http://XX.XX.XX.XX:8082/zzz/one

http://XX.XX.XX.XX:8083/xxx/two

方法2：使用axios进行前设置（适用于target相同的代理）

// 一般在全局设置里引入，例如main.js，方便第二行的配置被每一个axios请求识别import axios From "axios";
    // 只要发送axios请求，就在请求前加入/api的开头，例如 /zzz/one ->
     /api/zzz/oneaxios.defaults.baseURL = "/api";
        

进行了上方的配置后，在本地发送的请求会变为

http://localhost:8080/api/zzz/one

http://localhost:8080/api/xxx/two

而后可以设置只监听 "/api" 的代理，不过要设置pathRewrite参数：

devServer: {
    proxy: {
        "/api": {
            target: "http://XX.XX.XX.XX:8084",            changeOrigin: true,            ws: true,            pathRewrite: {
              "^/api": "",            }
,        }
,    }
,}
    ,

pathRewrite ：检查代理的请求中是否有 /api ，有的话把 /api 替换为冒号后面的内容，案例为替换成空字符串，也就是删去 /api 。（^是正则表达式的内容，意思是限定开头）

• 本地请求 http://localhost:8080/api/zzz/one ->  
• 代理后请求 http://XX.XX.XX.XX:8084/api/zzz/one ->
• 设置pathRewrite后的请求 http://XX.XX.XX.XX:8084/zzz/one
• 所以代理完成后真正发送给后端的请求就是 http://XX.XX.XX.XX:8084/zzz/one 啦。

1.统一给请求添加/api方便监测代理 2.统一删去/api发送正确的请求）

• 注意：小伙伴们可能会看到浏览器中右键检查打开的控制台中，网络-> 标头-> 常规，中的请求网址显示的还是 http://XX.XX.XX.XX:8084/api/zzz/one 。
• 这是因为浏览器的同源策略，经过代理设置的请求发送给后端已经变成 http://XX.XX.XX.XX:8084/zzz/one 没有/api 的形式了，不用被浏览器显示的请求网址干扰。
• 如果实在不想看到浏览器的请求网址中有api，可以采用方法1。

什么是跨域？

JavaScript同源策略：当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。

不同域之间相互请求资源，就算作“跨域”。

同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。**同源策略限制：**表单提交、AJAX请求等。

注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

proxy代理解决跨域

 **原理：**浏览器是禁止跨域的，但是服务端不禁止，在本地运行npm run serve等命令时实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了一层代理，因此不会出现跨域问题。

当我们在用本机去找服务器要数据时会产生跨域问题，所以利用vue-cli去开启一个代理服务器。

配置（vue.config.js）

方法一

优点：配置简单、请求资源时直接发给前端（8080）即可

缺点：不能配置多个代理，不能灵活的控制请求是否走代理

当请求了前端不存在的资源时，该请求会转发给服务器(优先匹配前端资源)

 module.exports = {
     devServer: {
             proxy: 'http://localhost:5000',     }
 }
    

方法二

优点：可以配置多个代理，且可以灵活的控制请求是否走请求

缺点：配置繁琐，请求资源时必须加前缀

//开启代理服务器(方法二)    devServer: {
        proxy: {
            //  '/yu'为请求前缀，用于控制是不是走代理，想走代理时就在请求前缀前边加上这个请求前缀            '/yu': {
                target: 'http://localhost:5000',                pathRewrite: {
 "^/yu": "" }
, //重写路径  匹配以/yu为开头的路径都变为空字符串                 ws: true, //用于支持websocket                changeOrigin: true //用于控制请求头中的host值            }
,            '/demo': {
                target: 'http://localhost:5001',                pathRewrite: {
 "^/demo": "" }
,                ws: true, //用于支持websocket                changeOrigin: true //用于控制请求头中的host值            }
,        }
    }
    

请求时：

请求前缀必须跟着端口号

getStudents() {
          axios.get("http://localhost:8081/yu/students").then(        (response) =>
 {
              console.LOG("请求成功了", response.data);
        }
    ,        (error) =>
 {
              console.log("请求失败了", error.message);
        }
          );
    }
,    getCars() {
          axios.get("http://localhost:8081/demo/cars").then(        (response) =>
 {
              console.log("请求成功了", response.data);
        }
    ,        (error) =>
 {
              console.log("请求失败了", error.message);
        }
          );
    }
    ,

1.vue-cli 2 是在路径为config/index.js的文件下proxyTable里配置的，该文件是整个项目的主要配置入口

// node自带路径工具.VAR path = require('path')// 分为两种环境，dev和productionmodule.exports = {
  dev: {
    // 配置好后一定要关闭原来的server，重新npm run dev启动项目。不然无效。    proxyTable: {
   // 需要代理的接口，可以跨域      // 用‘/api'开头，代理所有请求到目标服务器      '/api': {
            target: 'http:xxx.COM', // 目标接口域名            changeOrigin: true, // 是否启用跨域            pathRewrite: {
 //这里要理解成用'/api'代替target里面的地址，后面的组件中我们调用接口的时候直接用api代替，比如我要调用'http://40.00.100:3002/user/add'，直接写成'/api/user/add'即可              '^/api': ''  // 即/api相当于http://40.00.100:3002            }
        }
     }
  }
}
    

注意：‘/api’ 为匹配项，因为在 ajax 的 url 中加了前缀 ‘/api’，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 ‘/api’ 转为 ‘/’。

如果本身的接口地址就有 ‘/api’ 这种通用前缀，就可以把 pathRewrite 删掉。

2.vue-cli 3 是自己在根目录下新建vue.config.js文件，在devServer.proxy对象里配置（当然也有其他方式），配置后会和隐藏的配置自动进行整合

module.exports = {
    // cli3 代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换    devServer: {
      proxy: {
        '/yourapi': {
   //代理api，/yourapi的意义在于，声明axios中url已/api开头的请求都适用于该规则，注意是以/yourapi开头，即：axios.post({
url: '/yourapi/xxx/xxx'}
)          target: 'yourserver',   //服务器真实api地址，即需要请求的目标接口，此处target的意义在于：造成跨域是因为访问的host与我们的请求头里的origin不一致，所以我们要设置成一致，这个具体请看下文          changeOrigin: true,    //是否跨域，true为开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题          ws: true, // 是否启用websockets，根据实际情况看是否需要配置该项          pathRewrite: {
                '^/yourapi': 'https://我是服务器/api'   //重写路径        // 此处是大部分文章都不会明说的的地方，        // 既然我们设置了代理，则所有请求url都已写成/yourapi/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢        // 因此这里的意义在于， 以 /yourapi开头的url请求，代理都会知道实际上应该请求那里，        // ‘我是服务器/yourapi'，后面的/api根据实际请求地址决定，即我的请求url：/yourapi/test/test，被代理后请求的则是        // https://我是服务器/yourapi/test/test          }
         }
      }
    }
  }
    

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• vue服务器代理proxyTable配置如何解决跨域
• Vue项目配置跨域访问和代理proxy设置方式
• Vue如何解决跨域问题详解
• vue使用代理解决请求跨域问题详解

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！