首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

Vue devServer.proxy代理配置跨域详解,看这一篇就够了!

Sonder
2022-10-22
1015字
3分钟
浏览 (2.1k)

你要请求的线上域名

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, 如有侵权,请联系删除。

下一篇 / 一分钟让你悟到什么是同步/异步、微任务/宏任务、Promise、async/await

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)