情況描述
- 1.客戶端代碼運行在docker ngixn container啟動在3000端口
- 2.客戶端向另一個docker nodejs container發(fā)送請求啟動在8080端口
- 3.瀏覽器打開3000端口，發(fā)現(xiàn)報出錯誤
No 'Access-Control-Allow-Origin' header is present on the requested resource
問題分析
- Q1:根據(jù)以往的經(jīng)驗這是跨域問題經(jīng)常會報出的錯誤导饲，那么到底什么是跨域問題？什么情況才能出現(xiàn)跨域問題帜消？如何解決跨域問題棠枉？
- A1: 我們先來了解什么是跨域問題
- 請求從一個域發(fā)送到了另一個域。
- Q2:那么域是怎么樣界定是否是同一個的呢泡挺？
-
A2:根據(jù)下圖對url的劃分來理解辈讶，由下圖可知。問題中的請求發(fā)送方和接受方不在同一個域下娄猫，因此出現(xiàn)了跨域請求贱除。
image.png
給個例子：
// 同域名請求例子
https://localhost:8080/api/users
https://localhost:8080/api/register
// 跨域請求例子
https://localhost:8080/api/user
https://localhost:8081/
- Q3:那么跨域請求到底造成了什么樣的問題生闲，就叫他跨域問題？
- A3:這個問題翻譯過來就是：是不是所有的不同域下的請求都會出現(xiàn)問題月幌，答案：不是碍讯。當某一條請求通過瀏覽器發(fā)出，瀏覽器會在請求頭部加上該請求來自的域（origin）扯躺，請求的接收方去判斷他是否愿意處理來自這個域的請求捉兴，如果愿意就在請求頭部加上
Access-Control-Allow-Origin:true，請求回來后录语，瀏覽器再去檢查這個頭部是否包含這個值A(chǔ)ccess-Control-Allow-Origin倍啥，如果沒有就會爆出以上的錯誤。但是對于直接發(fā)送的http請求澎埠，沒有人回去添加origin頭部虽缕，也沒有人會去添加和檢查Access-Control-Allow-Origin:true這樣的字段。因此一般的http請求就算是跨域了蒲稳，也不會出現(xiàn)問題
image.png
- Q4:現(xiàn)在知道了什么情況下會出現(xiàn)跨域問題氮趋，那么如何解決呢？
- A4:首先江耀，如果請求必須要跨域剩胁，那么我們就可以把跨域的請求從瀏覽器轉(zhuǎn)出來，也就是說决记，瀏覽器只做同一域下的請求摧冀，然后跨域的請求交給http來做，這就是所謂的反向代理系宫。
- Q5:那么什么是反向代理，又如何做到呢建车？
- A5:按照上述方法扩借，瀏覽器需要將請求發(fā)送到同一個域下的服務(wù)器，很顯然這個服務(wù)器一定不是最終的處理服務(wù)器缤至，那么這個服務(wù)器需要幫助我們接受來自瀏覽器的請求并且將請求通過http轉(zhuǎn)發(fā)到跨了域的服務(wù)器潮罪，那么幫助轉(zhuǎn)發(fā)的服務(wù)器就是反向代理服務(wù)器
-
例子：nginx可以做反向代理服務(wù)器，那么我們將前端的打包好的文件放到nginx中领斥，啟動nginx在3000端口嫉到，然后用nginx啟動前端，因此請求應(yīng)該是從3000端口發(fā)出月洛。讓nginx反向代理8080端口何恶。那么就是，nginx接受來自前端的請求嚼黔，此時請求接受和發(fā)送方在同一域不會出現(xiàn)跨域問題细层，然后ngixn再將請求通過http轉(zhuǎn)發(fā)到8080端口下的服務(wù)即可
image.png
-
心得
- 我發(fā)現(xiàn)我記問題有個套路，每次都是問題表象是什么記住了疫赎，這個問題叫什么名字捧搞，然后我是怎么解決的。以后再出現(xiàn)一樣的錯誤我再這么解決即可陌僵。而且還背會了跨域問題只有瀏覽器有创坞，但是從來沒有理解過這些概念，簡單的說就是沒有問過為什么會發(fā)生偎谁？從今往后巡雨，我的目標不是解決問題了席函，是不僅要解決還要找到為什么發(fā)生，為什么這樣解決
