配置代理——解决跨域问题（详解）_前端配置代理解决跨域(1)

JSONP 解决跨域，就是利用

3、代理服务器解决跨域（本节重点）

代理服务器解决跨域问题，代理服务器与浏览器同源，不存在跨域问题，代理服务器与服务器非同源，但是服务器与服务器之间采用 http 请求，不存在跨域问题，所以这样就非常巧妙的解决了跨域的问题。下面我用图来帮助大家理解一下这段话

四、具体实现代码

（一）如何开启代理服务器

1、nginx：需要熟练后端，学习成本大，这里不使用

2、vue-cli：利用脚手架，代码简单，方便上手，这里主要讲解这个

（二）代码实现（proxy）

1、配置单个代理

// vue.config.js 文件中设置

module.exports={
     devServer:{
         proxy:'http://localhost:5000' 
     } 
}

优点：配置简单

缺点：1、不能配置多个代理

2、不能灵活控制到底走不走代理

2、配置多个代理

// vue.config.js 文件中设置
module.exports={
    devServer:{
        proxy:{
            '/api01':{ 
                target:'http://localhost:5000',
                // 重写请求
                pathRewrite:{
                    '^/api01':''
                }
            },
            '/api02':{
                target:'http://localhost:5001',
                // 重写请求
                pathRewrite:{
                    '^/api02':''
                }
            }
        }
    }
}

优点：可以灵活控制到底走不走代理

缺点：配置略微有点繁琐

写在最后，制作不易，如果对你有用，请留下一个免费的赞！

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容