Vite构建的项目通过代理解决跨域问题

liangqin_csdn

已于 2024-08-19 19:20:50 修改

阅读量694

点赞数 2

文章标签：前端

于 2024-08-19 16:38:21 首次发布

本文链接：https://blog.youkuaiyun.com/liangqin_csdn/article/details/141327612

版权

1. 编写vite.config.js配置文件
在项目的根目录下找到vite.config.js配置文件，编写代理规则

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server:{
    proxy:{
      //此处编写代理规则
      "/api":{
        target:"http://localhost:8080",
        changeOrigin:true,
        rewrite:path=>{
          return path.replace(/\/api/,'');
        }
      }
    }
  }
})

只要浏览器发出的请求URL的路径中含有/api，该代理就会生效。
2. target和changeOrigin
target要和changeOrigin结合使用，只有changeOrigin的值为true时，target才会生效。
以上述代理规则为例，如果浏览器发出的请求URL为/api/user/login，经过代理后，浏览器真正发出的请求URL就是http://localhost:8080/user/login
3. rewrite
在配置代理规则时，不仅可以改变请求URL的源，还可以修改请求URL的路径。
在上述例子中，浏览器发出的请求URL为/api/user/login，经过代理后，路径中的/api被替换成了空字符串。最后，浏览器真正发出的请求URL就是http://localhost:8080/user/login