Web前端最全配置代理——解决跨域问题（详解）_前端配置代理解决跨域，2024大厂前端开发面试总结+解答

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

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

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记

  

（一）产生问题

所谓跨域就是违背了同源策略，同源策略是一个著名的安全策略，规定了协议名，主机名，端口号这三个要一致。下面用图来详细讲解一下刚刚的流程

这是刚刚发请求的过程，根据上图可以看出来，请求已经发出去了，浏览器也已经把数据返回回来了，可是为什么我们拿不到呢，这是因为浏览器发现你跨域了，所以它将数据握在了自己手里，没有给我们。

（二）注意事项

这里有很多人以为产生跨域的时候，连请求都没有发出去，这样理解是错误的，请求已经发出去了，服务器也把数据返回回去了，只不过浏览器没有给我们罢了，这个一定要记住！

三、如何解决跨域

1、CORS 解决跨域

**cors 解决跨域，不需要前端做任何事情，只需要后端返回数据的时候加特殊的响应头即可。**这里就不对 CORS 进行详细的讲解了，如果有感兴趣的同学可以去看我这篇文章，里面详细讲解了CORS的实现：CORS如何实现跨域

2、jsonp 解决跨域

JSONP 解决跨域，就是利用

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

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

四、具体实现代码

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

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

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

（二）代码实现（proxy）

1、配置单个代理

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

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

优点：配置简单

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

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

2、配置多个代理

### 总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

这里分享一些前端学习笔记：

* **html5 / css3 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/c7aea89db6b059151c753196f8f4e9b5.png)

  

* **JavaScript 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/af0c75f32f6618baccf39ce440a0fb5c.png)

* **Vue 学习笔记**  

  ![](https://img-blog.csdnimg.cn/img_convert/94cca01f6717f672208838e9ac549be1.png)