vue3中的配置代理

news2024/11/18 23:29:14

如图，配置代理就是在客户端与服务器中充当中介的角色

关于配置代理，首先我们的要知道为什么要配置代理，配置代理做了什么事情

一、跨域是什么

二、如何解决

三、配置代理案例

1. 下面是我自己在后端尝试解决跨域的例子

2.然后在vue中解决跨域是在vue-cli中的 vue.config.js中配置代理，

关于配置代理，首先我们的要知道为什么要配置代理，配置代理做了什么事情

1.首先，为什么要配置代理。大家应该都写过axios请求吧，当我们向后台服务器发送axios请求的时候，有时候会在浏览器中报错这样一段话

这就是由于我们发送的请求跨域了，跨域并不是就请求发不出去或服务器的响应接受不到，而是由于 浏览器 向 服务器发送的请求跨域了，导致浏览器在接受到服务器的响应数据后拦截了下来，不给你。

所以简单点说，配置代理就是为了让浏览器接受到服务器的数据后发送给我们。

同源策略分为以下两种：

DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

关于详细的大家可以看什么是同源策略？ - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/66047383

2.配置代理做了什么。配置代理就是找一台代理服务器，在你发送请求的时候做一个中介，浏览器先将请求发送给代理服务器，代理服务器再将请求转发给后台的数据服务器。代理服务器要和你真正访问的后台服务器是同源的。

关于跨域我给大家从vue的文档中截取的这么一段

一、跨域是什么

跨域本质是浏览器基于同源策略的一种安全手段

同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能

所谓同源（即指在同一个域）具有以下三个相同点

协议相同（protocol）
主机相同（host）
端口相同（port）

反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域

一定要注意跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据。用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制

二、如何解决

解决跨域的方法有很多，下面列举了三种：

JSONP
CORS
Proxy

而在vue项目中，我们主要针对CORS或Proxy这两种方案进行展开

CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源

只要后端实现了 CORS，就实现了跨域

所以 CORS 解决跨域是在后端解决的

三、配置代理案例

1. 下面是我自己在后端尝试解决跨域的例子

从左边的窗口，我们可以看到我们用express在nodejs环境下搭建了一个简单的服务器，并且没有使用cors中间件，解决跨域

所有如下图所示，我们成功报错了

然后，我们在express搭建的服务器中，使用cors中间件，然后重启服务

然后结果也是如我们所料，并没有报跨域的错误

OK，到这里我们在服务端解决跨域问题就解决了

2.然后在vue中解决跨域是在vue-cli中的 vue.config.js中配置代理，

注意！！！在vue.config.js中配置代理只适用于开发环境，如果大家把项目进行打包后，devServer就没有用了，该报错的还是会报错，但是在打包后的生产环境中，我们还是有解决方法的。

如图，我们也是在服务器中重新注释掉了cors中间件，在vue.config.js中也没有配置代理。

那我们也是如愿以偿再次报错。

然后，我们再在vue.config.js中配置proxy代理，添加了这段代代码，且在发送请求时，我们也要在请求的url上携带上 /bpi

"/bpi": { // 代理接口前缀为/bpi的请求
        "target": 'http://localhost:8080', // 对应的代理地址
        "secure": false, // 接受运行在https上，默认不接受
        "changeOrigin": true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）
        "pathRewrite": { //重写路径 比如'/apis/aaa/ccc'重写为'/aaa/ccc'
          '^/bpi': ""
        }
      },