亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

一次跨域請(qǐng)求出現(xiàn) OPTIONS 請(qǐng)求的問(wèn)題及解決方法

余學(xué)文 / 1169人閱讀

摘要：實(shí)際使用時(shí)，由于向提交的長(zhǎng)度限制在字符，超過(guò)了則被瀏覽器拒絕，因此不采用。前端發(fā)起跨域請(qǐng)求就是正常的請(qǐng)求即可。

問(wèn)題背景
瀏覽器從一個(gè)域名的網(wǎng)頁(yè)去請(qǐng)求另一個(gè)域名的資源時(shí)，域名、端口、協(xié)議任一不同，都是跨域
在前后端開(kāi)發(fā)過(guò)程經(jīng)常會(huì)遇到跨域問(wèn)題。網(wǎng)上也都有解決方案。

寫(xiě)這篇文章時(shí)，我們碰到的一個(gè)場(chǎng)景是：要給s系統(tǒng)做一個(gè)擴(kuò)展，前端的html、js放在s系統(tǒng)里，后端需要做一個(gè)多帶帶的站點(diǎn)N.B.com。這就導(dǎo)致了跨域問(wèn)題，大多數(shù)時(shí)候 前后端用一個(gè)CORS方案 解決跨域問(wèn)題就可以了。但是我這次有點(diǎn)特別。

前端這邊是一個(gè)get請(qǐng)求，按理說(shuō)也沒(méi)啥，但是在請(qǐng)求的header里面要添加兩個(gè)自定義的header

  GET http://localhost:8080/api/v1/users
  Accept: */*
  Content-Type: application/json
  Authorization: token:21232f297a57a5a743894a0e4a801fc3
  Username: admin

增加了兩個(gè)自定義字段 Authorization和Username
在請(qǐng)求時(shí) 我看到 network里面出現(xiàn)了兩次請(qǐng)求記錄 第一次是一個(gè) OPTION請(qǐng)求 狀態(tài)碼200第二次是我的get請(qǐng)求 狀態(tài)碼 401

可以這邊后端已經(jīng)做了CORS處理。為何還出現(xiàn)這種情況呢。
我們一般在項(xiàng)目里解決跨域問(wèn)題簡(jiǎn)單說(shuō)會(huì)采取方案有

使用ajax直接跨域訪問(wèn)

2.使用JsonP。實(shí)際使用時(shí)，由于JsonP向Server提交URL的長(zhǎng)度限制在8000字符，超過(guò)了則被瀏覽器拒絕，因此不采用。

對(duì)于第一種方案，后端需要做的工作是：
接口允許允許跨域請(qǐng)求：

header("Access-Control-Allow-Origin:*");  //支持全域名訪問(wèn)，不安全，部署后需要限制為R.com
header("Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE"); //支持的http動(dòng)作
header("Access-Control-Allow-Headers:x-requested-with,content-type");  //響應(yīng)頭 請(qǐng)按照自己需求添加。

前端發(fā)起跨域請(qǐng)求：就是正常的$.ajax請(qǐng)求即可。我的項(xiàng)目用的vue全家桶 用的axios 發(fā)送的請(qǐng)求

// request攔截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers["Authorization"] =`token:${getToken()}` 
      config.headers["Username"] =`getUsername()`
    }
    return config
  },
  error => {
    // Do something with request error
    Promise.reject(error)
  }
)

但是，碰到個(gè)問(wèn)題，國(guó)內(nèi)網(wǎng)站基本沒(méi)有講，就是option請(qǐng)求問(wèn)題。

在正式跨域的請(qǐng)求前，瀏覽器會(huì)根據(jù)需要，發(fā)起一個(gè)“PreFlight”（也就是Option請(qǐng)求），用來(lái)讓服務(wù)端返回允許的方法（如get、post），被跨域訪問(wèn)的Origin（來(lái)源，或者域），還有是否需要Credentials(認(rèn)證信息）
三種場(chǎng)景：

如果跨域的請(qǐng)求是Simple Request（簡(jiǎn)單請(qǐng)求 ），則不會(huì)觸發(fā)“PreFlight”。Mozilla對(duì)于簡(jiǎn)單請(qǐng)求的要求是：

以下三項(xiàng)必須都成立：

只能是Get、Head、Post方法

除了瀏覽器自己在Http頭上加的信息（如Connection、User-Agent），開(kāi)發(fā)者只能加這幾個(gè)：Accept、Accept-Language、Content-Type、。。。。

Content-Type只能取這幾個(gè)值：

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

XHR對(duì)象對(duì)于HTTP跨域請(qǐng)求有三種：簡(jiǎn)單請(qǐng)求、Preflighted 請(qǐng)求、Preflighted 認(rèn)證請(qǐng)求。簡(jiǎn)單請(qǐng)求不需要發(fā)送OPTIONS嗅探請(qǐng)求，但只能按發(fā)送簡(jiǎn)單的GET、HEAD或POST請(qǐng)求，且不能自定義HTTP Headers。Preflighted 請(qǐng)求和認(rèn)證請(qǐng)求，XHR會(huì)首先發(fā)送一個(gè)OPTIONS嗅探請(qǐng)求，然后XHR會(huì)根據(jù)OPTIONS請(qǐng)求返回的Access-Control-*等頭信息判斷是否有對(duì)指定站點(diǎn)的訪問(wèn)權(quán)限，并最終決定是否發(fā)送實(shí)際請(qǐng)求信息。
那么我的get請(qǐng)求呢？
原來(lái)，產(chǎn)生 OPTIOINS 請(qǐng)求的原因是：自定義 Headers 頭信息導(dǎo)致的。
瀏覽器會(huì)去向 Server 端發(fā)送一個(gè) OPTIONS 請(qǐng)求，看 Server 返回的 "Access-Control-Allow-Headers" 是否有自定義的 header 字段。因?yàn)槲抑皼](méi)有返回自定義的字段，所以，默認(rèn)是不允許的，造成了客戶(hù)端沒(méi)辦法拿到數(shù)據(jù)。

那么這樣 的話如果后端是python的話

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = default_headers + (
    "Authorization,Username"
)

前端這邊如果用的vue全家桶 可以這樣搞一下

module.exports = {
    NODE_ENV: ""development"",
    ENV_CONFIG: ""dev"",
    BASE_API: ""/proxy""
}

      "/proxy": {
        target: "http://jupiter.dev.grdoc.org/",
        changeOrigin: true,
        pathRewrite: {
          "^/proxy": "/"
        },
        sesure:false
      }

開(kāi)發(fā)環(huán)境這樣搞一下 應(yīng)該就不算跨域了。

我是山豆 我的gitHub

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97043.html

相關(guān)文章

  • Ajax跨域

    摘要：發(fā)布自的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處。另外，該文章收納在的個(gè)人的知識(shí)整理倉(cāng)庫(kù)，歡迎投稿跨域簡(jiǎn)介常用跨域方法跨域簡(jiǎn)介所謂跨域指的是請(qǐng)求從其他的域獲取數(shù)據(jù)或者傳輸數(shù)據(jù)所謂域同源，指的是兩個(gè)服務(wù)器資源的根的域名端口協(xié)議三者完全相同，只要 發(fā)布自Kindem的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處。另外，該文章收納在Kindem的個(gè)人的 IT 知識(shí)整理倉(cāng)庫(kù)，歡迎 Star、Fork、...

    xiaotianyi 評(píng)論0 收藏0

  • 九種 “姿勢(shì)” 讓你徹底解決跨域問(wèn)題

    摘要：什么是跨域當(dāng)協(xié)議域名端口號(hào)，有一個(gè)或多個(gè)不同時(shí)，有希望可以訪問(wèn)并獲取數(shù)據(jù)的現(xiàn)象稱(chēng)為跨域訪問(wèn)，同源策略限制下都是不支持跨域的。命名是隨意的，只要是符合一級(jí)域名與二級(jí)域名的關(guān)系即可，然后訪問(wèn)。 showImg(https://segmentfault.com/img/remote/1460000018998493); 閱讀原文 同源策略 同源策略/SOP（Same origin pol...

    charles_paul 評(píng)論0 收藏0

  • 大話javascript 5期：跨域

    摘要：同源策略所謂同源是指協(xié)議，域名，端口均相同。同源策略是瀏覽器的一個(gè)安全功能，不同源的客戶(hù)端腳本在沒(méi)有明確授權(quán)的情況下，不能讀寫(xiě)對(duì)方資源。需注意的是由于同源策略的限制，所讀取的為跨域請(qǐng)求接口所在域的，而非當(dāng)前頁(yè)。 一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）統(tǒng)一資源定位符（URL）是用于完整地描述Internet上網(wǎng)頁(yè)和其他資源的地址的...

    jzzlee 評(píng)論0 收藏0

  • Fetch&CORS的簡(jiǎn)單實(shí)驗(yàn)

    摘要：服務(wù)器確認(rèn)允許之后，才發(fā)起實(shí)際的請(qǐng)求。在預(yù)檢請(qǐng)求的返回中，服務(wù)器端也可以通知客戶(hù)端，是否需要攜帶身份憑證包括和認(rèn)證相關(guān)數(shù)據(jù)。提供了一個(gè)接口，用于訪問(wèn)和操縱管道的部分，例如請(qǐng)求和響應(yīng)。專(zhuān)業(yè)的說(shuō)，完成了一次簡(jiǎn)單請(qǐng)求。 概念 CORS, Cross-origin resource sharing 跨域資源共享標(biāo)準(zhǔn)新增了一組 HTTP 首部字段，允許服務(wù)器聲明哪些源站有權(quán)限訪問(wèn)哪些資源。另外，...

    Zack 評(píng)論0 收藏0

  • 前端常見(jiàn)跨域解決方案（全）

    摘要：需注意的是由于同源策略的限制，所讀取的為跨域請(qǐng)求接口所在域的，而非當(dāng)前頁(yè)。目前，所有瀏覽器都支持該功能需要使用對(duì)象來(lái)支持，也已經(jīng)成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協(xié)議的一部分。 什么是跨域？ 跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的。 廣義的跨域： 1.) 資源跳轉(zhuǎn)： A鏈接、重定向、表單提交 2.) 資源...

    canger 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<