在 Vue.js 中使用 vite 搭建应用时,可以通过 vite.config.js 文件进行跨域代理的配置。
下面是一个简单的示例,假设我们需要访问 http://example.com/api,但是该接口在开发环境中会出现跨域问题,这时可以通过配置代理,让接口请求转发到本地服务器进行处理。
// vite.config.js
module.exports = {
proxy: {
'/api': {
target: 'http://example.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
}
以上代码中,我们使用了 proxy
选项进行配置,其中:
'/api'
表示对以/api
开头的请求进行代理;target
表示将请求转发到的目标地址;changeOrigin
表示是否改变请求头中的Origin
字段;rewrite
用于将请求地址中的/api
前缀去掉,以便与目标地址匹配。
在配置完成后,就可以在代码中直接访问 /api
接口,例如:
axios.get('/api/users').then((res) => {
console.log(res.data)
})