Vite代理配置

学不动学不明白
398 阅读3分钟

1.记录原因

最近使用 vue3 + vite搭建了一个项目，其中遇到了一些问题，需要通过代理来解决，比如这个SameSite问题，问题来了什么是SameSite, 什么是TM的SameSite,先配置代理吧

2.代理配置

  • vite 找到项目的 vite.config.js 文件， 这个时候你可以在文件中找到一个defineConfig的函数，我们的重点在server中
export default defineConfig({
  server: {
    host: '0.0.0.0', 
    proxy: {
      '/api': {
        target: 'http:127.0.0.1:8888', 
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        configure: (proxy, options) => {
          proxy.on('proxyRes', (proxyRes, req, res) => {
            const cookies = proxyRes.headers['set-cookie']
            if (cookies) {
              const modifiedCookies = cookies.map((cookie) => {
                return cookie.replace(/;(\s*)SameSite=Lax/, ';$1SameSite=None; Secure')
              })
              proxyRes.headers['set-cookie'] = modifiedCookies
            }
          })
        }
      }
    }
  }
})

配置说明：

  • server: 是涉及网络请求部分的配置
    • host: 目的:当你启动项目后可以使用本地的ip地址打开项目
    • proxy: 这里就是我们配置代理的地方
      • '/api': 这个是要对什么路径的接口进行拦截，你可以是 '/api1'也可以是'/aaa',看你的接口路径，我的接口路径是'/api/login',
        • target: 这个就是你想要代理到的地址，也就是后端会给你的地址
        • changeOrigin: 是否跨域
          • rewrite: 对路径进行修改，因为前端你可能'/api'只是你想写的实际后端地址是http://127.0.0.1:8888/login,所以你在请求的时候要给'/api'去掉
        • configure: 配置代理服务器，这里使用 proxy.on('proxyRes') 来拦截和修改响应头，这里就是处理 SameSite问题

3.为啥要配置Proxy呢，有啥用？

  1. 解决跨域：如果前后端分离，那可能就会出现不是同源的问题，通过配置代理，前端请求会被代理服务器转发到后端，从而绕过浏览器的同源策略限制。
  2. 简化开发配置： 我们使用axios或者fetch的时候，都要设置一个baseUrl,如果设置了代理就可以省略这一步
  3. 增强安全性： 通过代理服务器，可以隐藏后端服务的真实地址和端口，防止直接暴露在外网中，增加了应用的安全性，这个我还真不知道
  4. 统一接口路径：通过配置代理，可以将前端的请求路径统一。例如，所有 API 请求都可以通过 /api 前缀进行处理，然后代理服务器将请求转发到实际的后端服务。这有助于保持代码的一致性和可维护性
  5. 负载均衡和缓存： 代理服务器还可以实现负载均衡和缓存，提高应用的性能和可用性。这个没用过，待了解

4.总结

代理配置的好处总结

  • 跨域问题：解决跨域请求问题，使前端可以正常调用后端接口。
  • 简化配置：避免在代码中硬编码后端地址，简化开发和部署过程。
  • 增强安全性：隐藏后端服务的真实地址，提高安全性。
  • 统一路径：保持前后端路径一致性，增加代码可维护性。
  • 性能优化：通过负载均衡和缓存提高性能
avatar
文章
阅读
粉丝