vue-cli的跨域处理——代理配置(proxy)

最新推荐文章于 2024-03-09 19:54:18 发布

火兰

最新推荐文章于 2024-03-09 19:54:18 发布

阅读量4.7k

点赞数 9

分类专栏：浏览器相关知识及兼容性等文章标签： vue.js 前端 javascript node.js webpack

本文链接：https://blog.csdn.net/qq_47443027/article/details/125980780

版权

浏览器相关知识及兼容性等专栏收录该内容

6 篇文章 0 订阅

订阅专栏

什么是跨域？

指的是浏览器不能执行其他网站的脚本，简单来说是浏览器同源政策的限制，浏览器针对于ajax的限制。

同源政策：两个页面拥有相同的协议，端口，域名就是同源，如果有一个不相同就是不同源。

同源政策产生的目的：保护用户信息安全，防止一些网站盗取用户信息。

什么是代理？

代理是webpack提供给我们的，常说的代理就是一个代理服务器，例如A服务器请求B服务器，我们可以通过代理C服务器去帮助我们请求，产生的跨域原因就是浏览器的同源政策是针对于ajax的请求，并不限制服务器之间的通信传输，而这个代理服务器正是和我相同端口域名的，我只需去用代理服务器去发请求再去接收，从而达到跨域

举个生活中的栗子

例如我们都会去从某宝、东去买东西，但是呢商家不会去亲手把商品送给你，原因呢就是太远可以理解为跨域啦，商家就会去从利用快递的形式送到你家，而这个快递被送邮的过程就相当于代理服务器，下面的图优点抽象，但是接近于生活

通过代理(proxy)实现跨域

提前注意点 proxy只限于开发状态下使用

webpack-dev-server

//vue.config.js
devServer: {
    proxy: {
      // 如果请求地址以/api打头,就出触发代理机制
      // http://localhost:8080/api/login -> http://localhost:3000/api/login
      '/api': {
        target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }
  },

/api/ :代表请求路径以api开头的就将代理请求到 http://localhost:3000

target：代表代理到的目标地址

proxy工作原理实质上是利用http-proxy-middleware 这个http代理中间件，实现请求转发给其他服务器，对于为什么只在开发服务器，因为技术只是在webpack打包阶段临时生成了node serve，来实现nginx的proxy_pass的反向代理

Vue配置文件中的proxy配置

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中详细解释用法，上方未使用此参数

代理多个接口

axios.get("/zzz/one");  // http://localhost:8080/zzz/one
axios.get("/xxx/two");  // 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/one
axios.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 啦。