記一次跨域post請求數據之preflight request

前端跨域是一個老生常談的話題，前端必備的技能，網上相關介紹及解決方案紹多如牛毛，做者限於學識也講不出太過深刻的看法，故此本文只是記錄一次解決跨域的post請求的小文，若是能幫助遇到相同問題的朋友，那也是極好的。行文或有錯漏，歡迎指正。

一.背景介紹

本人寫的一個vue仿貓眼電影我的練手小項目，使用的貓眼線上的api接口，使用本地代理開發時毫無異常，以後部署上線，爲了解決跨域問題，我使用了nginx反向代理轉發對貓眼api的請求，大部分接口沒問題，可是有個post的請求接口被瀏覽器block了,以下圖所示的紅果果報錯（線上bug已修復，當時沒有保存截圖，下圖是本地模擬的bug）

對此的常規解決方案固然就是輸入問題，google一番了，在一堆搜索結果中找尋要找的那個解決方案。 若是google一下立馬有了解決方案，那固然是不可能的，做者也不會專門寫下此文。

二.解決思路

過程是曲折的，有了此文，那麼結果固然是完美解決了。

1.初步認識

雖然做者的英文很渣，可是報錯的緣由看幾個關鍵詞也能猜出是跨域出了問題，具體的緣由嘛，是由於預請求沒有經過控制訪問檢查，更具體的緣由是預請求不容許重定向。

關鍵詞 preflight request

對此我是懵逼的，固然解決bug的過程，也是學習的過程，我便踏上了蒐羅相關文檔瞭解preflight request是何方神聖。

2.查找文檔

重定向 CORS 跨域請求

爲何跨域的post請求區分爲簡單請求和非簡單請求和content-type相關？

前端 | 淺談preflight request 是從簡書上找到的對preflight request的科普文檔，感興趣的朋友能夠去看看，感謝此文的做者。

閱讀了前面提到的前端 | 淺談preflight request一文，針對出現此類的bug，我試着提取了幾個關鍵點

2.1爲何要發預檢請求

preflight request是爲確保服務器是否容許發起對服務器數據產生反作用的HTTP請求方法，而預先由瀏覽器發起OPTIONS方法的一個預檢請求，若是容許就發送真實的請求，若是不容許則直接拒絕發起真實請求。

2.2首先介紹不會觸發預檢請求的方法

• GET
• HEAD
• POST

  僅當POST方法的Content-Type值等於下列之一纔算作簡單需求

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

2.3觸發預檢請求的方法

簡單起見，咱們姑且認爲除了上述羅列的不會觸發預檢請求的狀況，其餘狀況下都會預先發送OPTIONS進行預請求。

preflight request不容許重定向

get post head當header有自定義屬性時也會發送options,詳見文末後記

三.嘗試解決

上面鋪墊分析了這麼多,咱們來看看錯誤請求頭，以下圖，post觸發了瀏覽器發送預檢請求OPTIONS方法，而返回的是重定向狀態碼是302，和上圖報錯信息及preflight request相關解釋徹底對應，那麼答案就很明確了，由於咱們這裏使用了axios，而axios的post方法Content-Type默認是application/json; charset=utf-8;因此如何避免post觸發預檢請求的關鍵就是使用上述Content-Type的三個任一值，application/x-www-form-urlencoded纔是最大淫家。

行文至此，差很少也解決了，饒了那麼大一圈，就只需修改一行配置參數，是否是有種想撞牆的感受？初次寫文感受詞窮了，考慮不周或者須要補充的地方，歡迎你們提出來探討一下。

後記補充

1. 經@摔炮指點補充：get post head當header有自定義屬性時也會發送options

本着求實的態度，我進行了測試，自定義了屬性 'X-GET-PREFILGHT_TEST': 'check preflight by customize headers Attributes'，確實如@摔炮所言，get到了新姿式，感謝。 報錯信息及請求頭等信息以下：