Vite配置跨域代理

本文介绍了如何在Vite中配置跨域代理,通过修改`server`配置中的`proxy`选项,实现将API请求转发到指定服务器,解决前端开发过程中遇到的跨域问题。示例展示了如何处理特定API路径的代理规则。

Vite

配置跨域代理

修改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://url:port',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

server中的proxy就是配置的代理

例如:

axios({
    method: 'get',
    url: '/api/user/login'
})

这个请求就会被发送去http://url:port/user/login

rewrite的作用就是将axios请求地址的/api去掉,如果不需要去掉api的话,不写rewrite就行。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值