如果你使用vue或者react开发,就得使用axios吧,然后为了解决跨域问题,就得使用vite配置吧,那怎么协调配置它们两个才能正常工作呢?
正常的流程:配置axios的baseURL,然后配置vite的proxy
第一种方式:路径不用重写
配置axios的baseURL:
//1、利用axios对象的方法create,去创建一个axios实例
const requests = axios.create({
//配置对象
//基础路径,requests发出的请求在端口号后面会跟改baseURl
baseURL: `${window.location.origin}`,
//代表请求超时的时间5s
timeout: 5000,
})
然后再配置vite的proxy:在vite.config.js中配置
server: {
host: '0.0.0.0',
proxy: {
'/team': {
target: 'http://dev*******.com:8087',
ws: false,
changeOrigin: true,
},
'/game': {
target: 'http://dev*********com:8087',
ws: false,
changeOrigin: true,
},
},
},
如果你想将路径重写也是可以的,加上:
rewrite: (path) => path.replace(/^\/api/, ''),
第二种方式:路径重写
需要配置axios的baseURL为:
然后将hado的路径重写:文章来源:https://www.toymoban.com/news/detail-761966.html
以上两种方式都是可以的:文章来源地址https://www.toymoban.com/news/detail-761966.html
到了这里,关于axios和vite在本地开发环境配置代理的两种方式,五分钟学会的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!