Vue devServer.proxy代理配置跨域详解,看这一篇就够了!
Sonder
2022-10-22
1015字
3分钟
浏览 (2.4k)
你要请求的线上域名
http://baidu.com
你要请求的线上接口
/news/list
拼接起来就是这样的
http://baidu.com/news/list
然后vue.config.js配置是这样的
module.exports = {
devServer: {
proxy: {
'/api': { //这里的/api表示的意思是以/api开头的才生效 ->刷下面的重点
target: "http://baidu.com",
changOrigin: true, //如果接口跨域这里就要这个参数配置
pathRewrite: {
//'^/api': '/api' //实际请求地址是http://baidu.com/api/news/list
'^/api': '/' //实际请求地址是http://baidu.com/news/list
// 我的理解就是http://baidu.com替换了/api/news/list里面的/api
}
}
},
刷重点
然后你的axios也需配置一下,不然配置的请求报错哦(我也是被这里的巨坑搞了好久,其他的文章也没有重点指出)
import axios from 'axios'
//当然在这里要坐判断,判断开发环境设置为/api,生产环境就是正式域名了http://baidu.com
axios.defaults.baseURL = "/api" //设置默认的为/api就好了,每次请求接口都会在前面拼接上
axios.create({
baseURL: "/api" //这里也是一样的效果
})
tips
这样的配置只会在开发环境生效,打包过后还是会跨域的哦
要么前端文件和请求域名在同一域下
要么后端同学辛苦处理一下了
本文转自 https://juejin.cn/post/7049555869024911367, 如有侵权,请联系删除。