vite配置-反向代理解决跨域

跨域原理

浏览器同源策略: 协议、域名和端口都相同是同源，浏览器会限制非同源请求读取响应结果。

本地开发环境通过 Vite 配置反向代理解决浏览器跨域问题，生产环境则是通过 nginx 配置反向代理 。

vite.config.ts 配置代理

// 写法1
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
    const env = loadEnv(mode, process.cwd())
    return {
        resolve: {
            ...
        },
        css: {
            ...
        },
        server: {
            host: '0.0.0.0',
            port: Number(env.VITE_APP_PORT), 
            open: true,
            // 反向代理解决跨域
            proxy: {
                [env.VITE_APP_BASE_API]: {
                    target: 'http://www.lixianghlong.cn',
                    changeOrigin: true,
                    rewrite: path => 
                        // eg: localhost:3000/dev-api/users/me -> http://www.lixianglong.cn/users/me
                        path.replace(new RegExp('^' + env.VITE_APP_BASE_API), ''),
                },
            }
        }
    }
}

// 写法2
export default defineConfig({
    ...
    server: {
        host: '0.0.0.0',
        port: 8080, 
        open: true,
        https: false,
        proxy: {
          '/api': {
            target: '要代理的地址',
            changeOrigin: true,
            ws: true,
            rewrite: (path: string) => path.replace(/^\/api/, ''),
          },
        },
    }
})

表面肉眼看到的请求地址: http://localhost:3000/dev-api/api/v1/users/me

真实访问的代理目标地址: http://www.lixianglong.cn/api/v1/users/me