前端開發過程跨域問題處理

做者：Duang

來源：恆生LIGHT雲社區

同域策略是什麼

同源策略是一個重要的安全策略，它用於限制一個origin的文檔或者它加載的腳本如何能與另外一個origin的資源進行交互。它是一個約定，也是瀏覽器核心也最基本的安全功能，它能幫助阻隔惡意文檔，減小可能被攻擊的媒介，提升安全性。同源策略會阻止一個域的javaScript腳本和另一個域的內容進行交互。所謂同源（即指在同一個域）就是兩個頁面具備相同的協議（protocol），主機（host）和端口號（port）。

跨域是什麼

當一個請求url的協議、域名、端口三者之間任意一個與當前頁面url不一樣（不在一個源）就是跨域，就會有跨域問題。

跨域問題描述

前端開發階段常會遇到跨域問題，主要緣由是先後端分離致使的不在一個源，後端服務會存放在其餘的服務器上而不是開發者的本地。如在開發過程當中，本地打開一個頁面url爲http://127.0.0.1/index.html,訪問接口爲https://wj.hs.net/manageconsole-deploy/getCheckCode.json，這個時候接口與頁面的協議、域名、端口不一樣，就觸發了跨域問題。

跨域報錯，以下圖：

或

判斷跨域另外一種方式:Option + 響應頭

在正式跨域的複雜請求前，瀏覽器會根據須要，自動發起一個「PreFlight」（也就是Option請求，用來讓服務端返回容許的方法（如get、post），被跨域訪問的Origin（來源，或者域），還有是否須要Credentials(認證信息）。當在響應頭中看到跨域屬性就可判斷接口跨域。服務端返回跨域響應頭包含以下參數：

1. Access-Control-Allow-Credentials: true 該項標誌着請求當中是否包含cookies信息，只有一個可選值：true（必爲小寫）。若是 不包含cookies，請略去該項，而不是填寫false。
2. Access-Control-Allow-Headers: X-Requested-With, Content-Type, Authorization 用於 preflight request （預檢請求）中，列出了將會在正式請求的 Access-Control-Request-Headers 字段中出現的首部信息。可支持的請求首部名字。請求頭會列出全部支持的首部列表，用逗號隔開。
3. Access-Control-Allow-Methods: OPTION, POST, GET, DELETE 在對 preflight request.（預檢請求）的應答中明確了客戶端所要訪問的資源容許使用的方法或方法列表。
4. Access-Control-Allow-Origin: http://127.0.0.2:3000 容許跨域的域名，只能填通配符或者單域名
5. Access-Control-Max-Age： 用來指定本次預檢請求的有效期（options），單位爲秒，，在此期間不用發出另外一條預檢請求

解決方案

主要解決方案思路：經過本地代理服務，代理遠程接口。

1. 把存在跨域問題的接口寫成調用本地域的接口，如當前打開頁面爲 http://127.0.0.1/index.html，將接口請求寫爲 http://127.0.0.1/api/getCheckCode.json
2. 將接口轉發到後端服務器地址。將1中的 http://127.0.0.1/api/getCheckCode.json轉發爲https://wj.hs.net/manageconsole-deploy/getCheckCode.json

如下提供2個解決方案：

Nginx代理

Nginx介紹

Nginx是一個高性能的HTTP和反向代理web服務器，同時也提供了IMAP/POP3/SMTP服務。咱們處理跨域問題使用了nginx的http代理功能。

Nginx跨域代理操做

1. 找到nginx.conf文件: 通常nginx.conf文件在nginx安裝目錄下的\conf\nginx.conf文件下；
2. 在nginx.conf文件添加配置：

配置介紹：

1. 監聽80端口，將http://localhost的全部請求服務轉發到http://127.0.0.1:81，實際訪問頁面http://127.0.0.1:81，打開頁面的url爲http://localhost；
2. 將http://localhost:80/api/user接口請求轉發到 https://wj.hs.net/manageconsole-deploy/user；

Webpack代理

Webpack介紹

Webpack是一個用於現代javaScript應用程序的靜態模塊打包器，和前端資源構建工具。在解決前端開發階段的跨域問題，咱們使用了webpack-dev-server的proxy屬性。Webpack-dev-server是webpack官方提供的一個小型Express服務器。使用它能夠爲webpack打包生成的資源文件提供web服務，供開發調試使用。主要提供功能：爲靜態文件提供服務、自動刷新和熱替換(HMR)。

Webpack-dev-server中的proxy提供了代理服務。

Webpack跨域代理操做

配置介紹：

1. target :表示/api/XXX會被代理到https://wj.hs.net/manageconsole-deploy/api/xxx',如：/api/user----> https://wj.hs.net/manageconsole-deploy/api/getCheckCode.json；
2. 處理跨域設置changeOrigin: true；
3. pathRewrite：不想始終傳遞/api，則須要重寫路徑，如上請求/api/ getCheckCode.json會被代理到https://wj.hs.net/manageconsole-deploy/getCheckCode.json ；

實際開發遇到的chrome瀏覽器跨域問題

不少近期更新了chrome版本的同窗會發現，原本能夠訪問的頁面，在更新後頁面刷不出來了，通常緣由是在Chrome 80及以上版本中，Chrome會將沒有聲明SameSite值的cookie默認設置爲SameSite=Lax，在跨域請求的狀況下不容許跨域攜帶cookie給後端，致使全部跨域場景下使用cookie進行鑑權的服務會受到影響。

解決：

1. 在chrome瀏覽器地址欄輸入chrome://flags並回車；
2. 在搜索欄中輸入SameSite by default cookies搜索，並禁用如圖中的兩項設置 ，改成Disabled便可；

3.點擊右下鍵ReLaunch重啓瀏覽器便可。

總結

前端開發調試階段遇到的跨域問題，主要是因爲先後端服務不在同一個origin致使的，能夠使用代理的方式解決。

以上提供了兩種代理的方法:

·nginx高性能的HTTP代理服務

·webpack的webpack-dev-server插件中的proxy

排除以上同源策略致使的跨域問題，接口無報錯，頁面顯示不正常狀況，能夠考慮是由於高版本chrome對跨域作了更多的限制致使的，能夠設chrome://flags的SameSite。

跨域問題在前端開發階段常會遇到，設置代理可以快速解決跨域問題，並不須要後端協助，節省了調試時間，提升開發效率。但願以上內容可以幫助到前端開發的同窗們。