options預(yù)檢請(qǐng)求的前后端解決方法是什么

今天小編給大家分享一下options預(yù)檢請(qǐng)求的前后端解決方法是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

請(qǐng)求的分類(lèi)

這件事還要從瀏覽器說(shuō)起，基本上我們的請(qǐng)求都是CORS跨域請(qǐng)求（前后端分離嘛，基本上部署位置的IP\端口\協(xié)議不可能完全相同，所以就屬于跨域了），CORS跨域請(qǐng)求需要瀏覽器和服務(wù)器同時(shí)支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。

而CORS跨域請(qǐng)求，又分成簡(jiǎn)單請(qǐng)求simple request， 和復(fù)雜請(qǐng)求not-so-simple request。

復(fù)雜請(qǐng)求就會(huì)觸發(fā)我們的options預(yù)檢請(qǐng)求，這是符合以下規(guī)范的。

跨域共享標(biāo)準(zhǔn)規(guī)范要求，對(duì)那些可能對(duì)服務(wù)器數(shù)據(jù)產(chǎn)生副作用的 HTTP 請(qǐng)求方法
（特別是 GET 以外的 HTTP 請(qǐng)求，或者搭配某些 MIME 類(lèi)型的 POST 請(qǐng)求），
瀏覽器必須首先使用 OPTIONS 方法發(fā)起一個(gè)預(yù)檢請(qǐng)求（preflight request），
從而獲知服務(wù)端是否允許該跨域請(qǐng)求。服務(wù)器確認(rèn)允許之后，才發(fā)起實(shí)際的 HTTP 請(qǐng)求。

1、簡(jiǎn)單請(qǐng)求的定義

（1）請(qǐng)求方式為`GET、HEAD、POST`時(shí)的請(qǐng)求；
（2）認(rèn)為設(shè)置規(guī)范集合之內(nèi)的首部字段，
    如`
    Accept/
    Accept-Language/
    Content-Language/
    Content-Type/
    DPR/
    Downlink/
    Save-Data/
    Viewport-Width/
    Width`;
（3）Content-Type 的值僅限于下列三者之一,即`
    application/x-www-form-urlencoded、
    multipart/form-data、
    text/plain`；
（4）請(qǐng)求中的任意 `XMLHttpRequestUpload`對(duì)象均沒(méi)有注冊(cè)任何事件監(jiān)聽(tīng)器；
（5）請(qǐng)求中沒(méi)有使用 `ReadableStream`對(duì)象。

2、復(fù)雜請(qǐng)求的定義

除了上面的以外的請(qǐng)求，基本上都是復(fù)雜請(qǐng)求。

比如自定義的token、Authorization等請(qǐng)求頭字段，或者是PUT、DELETE等請(qǐng)求方式。

3、預(yù)檢帶來(lái)的小問(wèn)題

因?yàn)轭A(yù)檢，會(huì)額外占用服務(wù)器資源，還會(huì)延遲真正請(qǐng)求的發(fā)起時(shí)間，導(dǎo)致頁(yè)面上性能變差（這一點(diǎn)在使用openai的api深有體會(huì)，因?yàn)槭菄?guó)外服務(wù)器，加上預(yù)檢，基本上每次都要返回好久）。

4、解決方式

解決方式可以從前端或者后端入手，選其一就可以了，除了以下方法，可能還有其他的解決方式。

（1）前端的解決方式

// 引入
import qs from 'qs'
// 然后在請(qǐng)求攔截器的部分
axios.interceptors.request.use((config) => {
  if(config.method  === 'post'){
    config.data = qs.stringify(config.data);
  }
  return config;
},(error) =>{
  return Promise.reject(error);
});

如下，從json格式變成了string字符串，后端獲取后需要重新格式化一下才能用。

 // qs.stringify 前
 config.data = {
     "userId": "520b0ec3229",
     "startTime": "15489504",
     "endTime": "1559999"
 }
 // qs.stringify 后,內(nèi)容變?yōu)?
 "userId=520b0ec3229&startTime=15489504&endTime=1559999"

（2）后端的解決方式一

服務(wù)器端設(shè)置 Access-Control-Max-Age 字段，瀏覽器會(huì)根據(jù)返回的

Access-Control-Max-Age 字段緩存該請(qǐng)求的 OPTIONS 預(yù)檢請(qǐng)求的響應(yīng)結(jié)果。

設(shè)置大點(diǎn)就可以了

比如設(shè)置30天，那就觸發(fā)一次預(yù)檢后，后續(xù)30天內(nèi)，同一請(qǐng)求源頭不會(huì)再次觸發(fā)預(yù)檢請(qǐng)求。

// 后端設(shè)置，2592000單位秒，這里是30天
response.addHeader( "Access-Control-Max-Age", "2592000" )

（3） 后端解決方式二

access-control-allow-origin: *;

這種比較危險(xiǎn)，因?yàn)樵试S了所有網(wǎng)站都可以跨域共享資源。

可以把*改為具體的網(wǎng)址源，也就是白名單。

以上就是“options預(yù)檢請(qǐng)求的前后端解決方法是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。