情况描述
- 1.客户端代码运行在docker ngixn container启动在3000端口
- 2.客户端向另一个docker nodejs container发送请求启动在8080端口
- 3.浏览器打开3000端口，发现报出错误
No 'Access-Control-Allow-Origin' header is present on the requested resource
问题分析
- Q1:根据以往的经验这是跨域问题经常会报出的错误，那么到底什么是跨域问题？什么情况才能出现跨域问题？如何解决跨域问题？
- A1: 我们先来了解什么是跨域问题
- 请求从一个域发送到了另一个域。
- Q2:那么域是怎么样界定是否是同一个的呢？
-
A2:根据下图对url的划分来理解，由下图可知。问题中的请求发送方和接受方不在同一个域下，因此出现了跨域请求。
image.png
给个例子：
// 同域名请求例子
https://localhost:8080/api/users
https://localhost:8080/api/register
// 跨域请求例子
https://localhost:8080/api/user
https://localhost:8081/
- Q3:那么跨域请求到底造成了什么样的问题，就叫他跨域问题？
- A3:这个问题翻译过来就是：是不是所有的不同域下的请求都会出现问题，答案：不是。当某一条请求通过浏览器发出，浏览器会在请求头部加上该请求来自的域（origin），请求的接收方去判断他是否愿意处理来自这个域的请求，如果愿意就在请求头部加上
Access-Control-Allow-Origin:true，请求回来后，浏览器再去检查这个头部是否包含这个值Access-Control-Allow-Origin，如果没有就会爆出以上的错误。但是对于直接发送的http请求，没有人回去添加origin头部，也没有人会去添加和检查Access-Control-Allow-Origin:true这样的字段。因此一般的http请求就算是跨域了，也不会出现问题
image.png
- Q4:现在知道了什么情况下会出现跨域问题，那么如何解决呢？
- A4:首先，如果请求必须要跨域，那么我们就可以把跨域的请求从浏览器转出来，也就是说，浏览器只做同一域下的请求，然后跨域的请求交给http来做，这就是所谓的反向代理。
- Q5:那么什么是反向代理，又如何做到呢？
- A5:按照上述方法，浏览器需要将请求发送到同一个域下的服务器，很显然这个服务器一定不是最终的处理服务器，那么这个服务器需要帮助我们接受来自浏览器的请求并且将请求通过http转发到跨了域的服务器，那么帮助转发的服务器就是反向代理服务器
-
例子：nginx可以做反向代理服务器，那么我们将前端的打包好的文件放到nginx中，启动nginx在3000端口，然后用nginx启动前端，因此请求应该是从3000端口发出。让nginx反向代理8080端口。那么就是，nginx接受来自前端的请求，此时请求接受和发送方在同一域不会出现跨域问题，然后ngixn再将请求通过http转发到8080端口下的服务即可
image.png
-
心得
- 我发现我记问题有个套路，每次都是问题表象是什么记住了，这个问题叫什么名字，然后我是怎么解决的。以后再出现一样的错误我再这么解决即可。而且还背会了跨域问题只有浏览器有，但是从来没有理解过这些概念，简单的说就是没有问过为什么会发生？从今往后，我的目标不是解决问题了，是不仅要解决还要找到为什么发生，为什么这样解决
