[问题探讨]使用反向代理解决跨域请求

最新推荐文章于 2025-03-20 11:39:42 发布

tom_wong666

最新推荐文章于 2025-03-20 11:39:42 发布

阅读量645

点赞数 1

分类专栏：问题探讨文章标签： nginx vue http 跨域 ajax

本文链接：https://blog.youkuaiyun.com/tom_wong666/article/details/103263040

版权

本文探讨了浏览器的同源策略导致的跨域问题及其原因，并介绍了通过反向代理来解决跨域的方案。重点讲解了反向代理的原理，以及在开发环境（以vue为例）和测试/生产环境（使用nginx）中的具体配置步骤，旨在帮助前端开发者自主解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：使用反向代理解决跨域请求

一，跨域问题产生的原因

浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，而引入了同源策略，对于以下非同源情况，都会禁止ajax请求：

域名/IP不一致；
端口号不一致；
协议不同；
二级域名不同。

二，使用反向代理解决跨域

目前比较通用的方法是CORS和反向代理，CORS对于前端小伙伴来说是一般无感的(某些特殊业务需求中使用低版本浏览器可能不支持CORS)，实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。简言之，CORS依赖后端，这确实有点不爽，今天我们来阐述通过反向代理由前端小伙伴们自己来解决跨域问题。

1，原理

通过使用web服务器，对其他服务器资源进行反向代理，对请求资源进行中转，来/" 欺骗 "/浏览器，使浏览器感觉不到资源来自于其他服务器，以达到解决跨域的效果。

2，开发环境配置(vue为例)

// 在config  index.js里面配置如下代理
// 你的服务器地址+端口号比如 http://90.0.19.244:8068
  const API_SERVER = "http://90.0.19.244:8068"
  dev: {
    proxyTable: {
      '/api/**': {
        target: API_S