node用2行程式碼解決? HTTP跨域?

程式碼地址：github.com/XinYueXiao/…

一、 製造不同源

1. 建立一個伺服器3006，用於處理請求

1.1 在index.html頁面，模擬請求api/users

1.2 模擬伺服器，伺服器在3006埠

1.3 使用nodemon啟動api.js，在http://localhost:3006/可以看到請求資訊

nodemon是用於啟動node服務的，使用該工具儲存後自動更新服務程式碼，不用重新執行啟動檔案

2. 建立另一個伺服器3008，用於請求資料

2.1 兩個埠服務一起啟動，在index.js引入兩個服務檔案，並啟動index.js

2.2 此時訪問3008，訪問api/users 404

3.解決它

3.1 ? 埠問題

3.1.1修改index.html介面請求為3006埠

• 對不同埠的介面請求進行對比，發現通過3008訪問3006時，介面請求成功，瀏覽器去無顯示

• 檢視瀏覽器錯誤 ---> 此時發生了跨域的請求（埠不同）

通過CORS策略已阻止從源“ http://localhost:3008”訪問“http://localhost:3006/api/users”
處的XMLHttpRequest：“ Access-Control-Allow-Origin”標頭的值為“http://localhost:3008' 不等於提供的來源。

• 由此得知需要在服務端設定`Access-Control-Allow-Origin`

        -未設定`Access-Control-Allow-Origin`

         -設定`Access-Control-Allow-Origin`，頁面顯示正常

 3.1.2由上可知，跨域是被瀏覽器限制住了,到這裡結束了嗎？並沒有

上面的例子只是一個簡單的請求，http還會傳送預檢請求，什麼情況會觸發預檢請求呢？HTTP請求使用了以下HTTP的方法

• PUT
• DELETE
• CONNECT
• OPTIONS
• TRACE
• PATCH

或者人為設定了對 CORS 安全的首部欄位集合之外的其他首部欄位

Accept

Accept-Language

Content-Language

Content-Type

DPR

Downlink

Save-Data

Viewport-Width

Width

Content-Type的值不屬於下列之一:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

作者：coder_sherry
連結：www.jianshu.com/p/b55086cbd…（可以檢視更詳細的解釋）
來源：簡書

3.2 ?預檢請求問題

3.2.1模擬預檢請求 --> 人為設定CORS不安全欄位

此時瀏覽器出於pending狀態，需要實現預檢請求使其變成ok狀態

3.2.2實現預檢請求-->設定不安全欄位為允許

• 預檢請求改為通過後，會發起兩個請求，第一個為預檢請求，設定`X-Token`為允許欄位

• 第二個為普通請求，此時的X-Token已變成允許，請求正常，併為普通請求設定X-Token值

3.3 ?`withCredentials`跨域請求憑證

XMLHttpRequest.withCredentials 屬性是一個Boolean型別，它指示了是否該使用類似cookies,authorization headers(頭部授權)或者TLS客戶端證照這一類資格證照來建立一個跨站點訪問控制（cross-site Access-Control）請求。在同一個站點下使用withCredentials屬性是無效的。

3.1 如果你的請求頭需要新增cookie，你需要在相應位置設定`withCredentials`為`true`

4.Proxy代理

4.1 在proxy新增代理，並註釋之前新增的允許操作

4.2 執行nodemon proxy.js 

4.3 總結，兩行解決它?