Nginx解决跨域请求，通俗解释
⼀、Nginx
关于Nginx的⽤途，听到最多的两个词，就是：
端⼝转发
负载均衡
负载均衡不属于现阶段要学习的内容，重点来看⼀看端⼝转发，本⽂⽤它来解决跨域请求的问题。
⼆、CROS 跨域资源共享
我们需要知道，同源的三要素：协议、域名、端⼝。
如果⽐较两个地址，只要三者中只要有任何⼀个不同，就算跨域。
// 协议：http
// 域名：localhost
/
负载均衡的理解
/ 端⼝：8011
localhost:8011
出于安全原因，浏览器限制从脚本（⽐如JavaScript）内发起的跨源HTTP请求。
如果浏览器检测到跨域，它会尝试发起⼀次请求，然后查看返回的内容中，是否⼀个有允许跨域请求的标记（CORS响应头），如果有正确的标记，那么就不拦截；如果没有标记，浏览器就会阻⽌这个请求。并报错。
三、项⽬中为何产⽣跨域
在前后台分离的项⽬中，前台和后台分别运⾏在不同的端⼝上。
所以前台向后台发起请求时，会因为跨域，⽽被浏览器拦截下来。
浏览器错误信息：
这时解决⽅案有两个：
开放跨域请求
使跨域变成同源
第⼀种⽅法，显然不安全，开放跨域意味着，浏览器不再进⾏拦截。如果前台代码被篡改，把后台的地址指向⿊客的服务器，那么会对⽤户造成损失。
第⼆种⽅法，想办法变成同⼀个域，这就轮到Nginx出场了！
四、使⽤Nginx转发
⾸先要明⽩，是谁把前台向后台的请求拦截下来的？不是后台，⽽是浏览器。
如果要避免跨域，只要让浏览器认为“我正在向同⼀个域发起请求”，就可以了。
假设前台使⽤4200端⼝，后台使⽤8080端⼝，那么，再加⼊⼀个8011端⼝，作为⽤户访问时连接的端⼝。
在前台的代码中，会有，如果发现某个请求是指向后台的，就会在Url中加⼊⼀个特殊的标识(⽐如加⼀个/api/作为前缀)
/
/ header中带有do_not_intercept，且值为true，则不添加url前缀
if (('true' !== (YunzhiInterceptor.DONT_INTERCEPT_HEADER_KEY))
&& !url.startsWith('') && !url.startsWith('')) {
url = '/api/' + url;
}
现在，⽆论是指向前台还是后台的请求，都会发送到8011端⼝，只不过，指向后台的请求会有⼀个/api/前缀。
接下来使⽤Nginx监听8011端⼝，当接收到请求时，根据是否有前缀，来判断此请求交给前台或后台处理。
过程如图：
上图就是转发的原理。
五、总结
使⽤Nginx端⼝转发，本质上就是：让浏览器认为前台和后台是同⼀个域，就不会产⽣跨域请求。
开发者事先约定好，根据不同的请求地址，来访问不同的服务器。
Nginx接收到数据之后，根据地址，转发给相应的服务器来处理。
如果需要另外安排其他的服务，来实现⽂件上传功能的话，只需要把URL处理⼀下，加上不同的前缀即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。