随机掉落的项目足迹：Vue3中vite.config.ts配置代理服务器解决跨域问题

跨域问题产生的原因：浏览器同源策略

后面的通俗解释小标题下的内容是便于大家理解同源策略和跨域问题。

而同源策略和跨域问题这两个小标题下的内容虽然比较专业不容易阅读，但是还是建议大家花时间理解并记忆，因为这是前端面试中的常考点。

同源策略

同源策略(Same-0rigin Policy)是指浏览器安全策略中的一项重要规则,它规定了浏览器只允许当前网页的脚本与来自同一站点(协议、主机、端口号相同)的窗口进行交互,而限制了与不同源(协议、主机、端口号任一不同)的窗口进行交互。这种限制能够有效保障用户的信息安全和隐私。

同源策略限制了跨域请求、Cookie、Localstorage、IndexedDB 等跨站点资源的访问,防止恶意网站窃取用户数据和攻击。同源策略的存在是 Web 安全的重要保障,是浏览器防范跨站脚本攻击(XSS)、跨站请求伪造(CSRF)等安全威胁的关键措施。

如果需要进行跨域请求或共享数据，可以通过特定的手段(如 JSONP、CORS、代理等)来实现。同时，Web 应用开发中应当严格遵守同源策略的原则，避免将敏感信息暴露在跨域页面中。

跨域问题

跨域问题(Cross-0rigin Resource sharing，CORs)是由于浏览器的同源策略(Same-0rigin Policy)导致的。如果两个 URL 的协议、主机名和端口号都相同,那么它们就是同源的,否则就是跨域的。当网页发起跨域请求时，浏览器会根据同源策略限制请求。 

通俗解释

举个例子：我的前端服务运行在我电脑的5173端口，而后端服务运行在我队友电脑的8080端口，由于咱们前后端不在同一个端，所以我通过浏览器向我队友的后端服务发送请求，浏览器会认为我的请求是不安全的，于是拒绝我的请求

而如果是小程序开发，小程序页面不是运行在浏览器的，没有同源策略，也就不存在跨域问题，小程序开发中，前端可以直接向不同源的后端发送请求

配置代理服务器解决跨域问题

原理

由浏览器直接向后端服务发送请求会产生跨域问题

那么我们可以通过配置代理来解决跨域问题：浏览器先将请求发送至前端服务（由于都是5173端口，不存在跨域问题），再由前端服务转发至后端服务（前端服务和后端服务之间的交互是脱离浏览器的，没有同源策略，也就不存在跨域问题）

这时，前端服务就充当了一个“中介”，我们称它为“代理服务器”

 

方法

找到关于请求配置的request.js文件，将请求基地址改成/apis（改成其他英文单词也行），由于你没有写类似于http://localhost:8080这样的基地址，而是只写了一个不完整的地址/apis，所以会自动拼接上AJAX请求发送时所在的源，也就相当于你在请求基地址写的是'http://localhost:5173/apis'

这样做的目的是将请求发往前端服务所在的源

 vite.config.ts文件中，添加如下配置，这段代码可以将前端服务收到的请求转发至后端服务

配置代理服务器的代码如下，大家需要根据自己的实际情况修改target中后端服务所在的源

注意：第三行代码中单引号里面的内容必须和前面的请求基地址一样——'/apis'

server: {
    proxy: {
      '/apis': {
        target: 'http://enx5eq.natappfree.cc', //后端服务所在的源
        changeOrigin: true, //修改源
        rewrite: (path) => path.replace(/^\/apis/, '') // /apis替换为''
      }
    }
  }

如果后端接口地址是/api/getVerification，那么我们就可以写出如下函数，最终的请求将被发送至http://enx5eq.natappfree.cc/api/getVerification

代码解释

假设请求接口的地址是/user/getUserName，由于请求基地址的配置，请求将会发往http://localhost:5173/apis/user/getUserName

而由于 http://localhost:5173/apis/user/getUserName 中包含/apis，代理生效，请求最终会发往http://enx5eq.natappfree.cc/user/getUserName，原理如下图

需要注意的是，虽然浏览器显示的请求地址看起来好像不对，但是实际上请求已经被正确发送至后端服务器了