1.跨域解釋

1.1 怎么知道我遇到了跨域問題

如果項目沒做前后端分離，是不會有跨域問題的。前后端分離的項目中，前端調用后臺服務時，報錯 No 'Access-Control-Allow-Origin' header is present on the requested resource，你就是遇到了跨域問題。另外，前端調試墻裂推薦使用chrome，使用QQ瀏覽器遇到過跨域訪問不了但是不報錯的坑爹事件。

1.2 為什么有跨域問題

瀏覽器的同源策略拒絕了我們的請求。 所謂同源是指，域名，協議，端口相同，瀏覽器執行一個腳本時同源的腳本才會被執行。如果非同源，那么在請求數據時，瀏覽器會在控制臺中報上面的異常，提示拒絕訪問。這是為了同一瀏覽器打開多個網站時，保護你的A網站登陸信息不被B網站拿去訪問A網站，B網站登陸信息同理。

1.3 怎么解決跨域問題

網上的文章對于解決跨域問題的介紹都很詳細了。但對于使用Nginx解決跨域大多寫的不太詳細或者太詳細以至于干擾因素太多，看了容易造成誤解。這里做個總結。

---

2.使用nginx解決跨域問題

2.1 先明確幾個概念

• 首先明確一個概念，前端項目、后端項目、以及nginx，這就是三個server項目，他們只是互相之間交流數據；
• 三個項目都有自己的ip：port組合，哪怕你是在同一臺服務器上啟動這三個server，他們的port也是不可能有一樣的；
• 所以，前端項目，不論訪問nginx還是訪問后端項目，都會產生跨域問題。

2.2 解決跨域問題

以下舉例都是項目在同一臺機器上，所以IP相同，只以端口區分前端項目（8081）、后端項目（8082）和nginx（8080）。

方法1：在nginx中配置地址重寫（或者轉發也行）

訪問地址以/resource開頭的都會被這個模塊捕獲，轉發到http://192.168.137.189:8082的后端項目上去。例如此時訪問http://192.168.137.189:8080/resource/userList/engineer，就會轉發到http://192.168.137.189:8082/userList/engineer。
訪問地址以/js開頭的也被這個模塊捕獲，轉發到http://192.168.137.189:8082的前端項目上去。

server {listen 8080;location /resource {rewrite ^/resource/?(.*)$ /$1 break;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://192.168.137.189:8082/; # 轉發地址}location /js {rewrite ^/js/?(.*)$ /$1 break;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://192.168.137.189:8081/; # 轉發地址} }

此時統一通過nginx訪問前后端項目，通過/js標識轉發到前端項目，通過/resource標識轉發到后端項目。瀏覽器同源策略記錄的就是http://192.168.137.189:8080/，瀏覽器也只訪問這個nginx的8080地址，跨域問題也就得到了解決。

方法2：nginx中添加允許跨域請求頭

server {listen 8080;add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;location /resource {rewrite ^/resource/?(.*)$ /$1 break;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://192.168.137.189:8082/; # 轉發地址} }

這就和不用nginx，直接在后端項目中（tomcat或者自己寫的服務端代碼）配置允許跨域一樣，只不過把允許跨域的配置放在nginx中，這個配置解決了前端項目訪問nginx的跨域問題，而nginx訪問后端項目不存在跨域問題（不是瀏覽器，沒有同源策略限制）。此時nginx對于后端就相當于一個代理分發服務器。

---

3.總結

瀏覽器的同源策略只記錄他訪問對象的ip和port，訪問其他資源如果還是這個ip：port，就不存在跨域問題，如果不是這個ip：port，就用nginx講這個ip：port轉發到要訪問的ip：port，讓他仍然訪問這個同源策略的ip：port。

總結

以上是生活随笔為你收集整理的使用nginx解决跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。