国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

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

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

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

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

前端這邊是一個get請求,按理說也沒啥,但是在請求的header里面要添加兩個自定義的header

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

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

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

使用ajax直接跨域訪問

2.使用JsonP。實際使用時,由于JsonP向Server提交URL的長度限制在8000字符,超過了則被瀏覽器拒絕,因此不采用。

對于第一種方案,后端需要做的工作是:
接口允許允許跨域請求:

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

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

// 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)
  }
)

但是,碰到個問題,國內(nèi)網(wǎng)站基本沒有講,就是option請求問題。

在正式跨域的請求前,瀏覽器會根據(jù)需要,發(fā)起一個“PreFlight”(也就是Option請求),用來讓服務(wù)端返回允許的方法(如get、post),被跨域訪問的Origin(來源,或者域),還有是否需要Credentials(認證信息)
三種場景:

如果跨域的請求是Simple Request(簡單請求 ),則不會觸發(fā)“PreFlight”。Mozilla對于簡單請求的要求是:

以下三項必須都成立:

只能是Get、Head、Post方法

除了瀏覽器自己在Http頭上加的信息(如Connection、User-Agent),開發(fā)者只能加這幾個:Accept、Accept-Language、Content-Type、。。。。

Content-Type只能取這幾個值:

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

XHR對象對于HTTP跨域請求有三種:簡單請求、Preflighted 請求、Preflighted 認證請求。簡單請求不需要發(fā)送OPTIONS嗅探請求,但只能按發(fā)送簡單的GET、HEAD或POST請求,且不能自定義HTTP Headers。Preflighted 請求和認證請求,XHR會首先發(fā)送一個OPTIONS嗅探請求,然后XHR會根據(jù)OPTIONS請求返回的Access-Control-*等頭信息判斷是否有對指定站點的訪問權(quán)限,并最終決定是否發(fā)送實際請求信息。
那么我的get請求呢?
原來,產(chǎn)生 OPTIOINS 請求的原因是:自定義 Headers 頭信息導(dǎo)致的。
瀏覽器會去向 Server 端發(fā)送一個 OPTIONS 請求,看 Server 返回的 "Access-Control-Allow-Headers" 是否有自定義的 header 字段。因為我之前沒有返回自定義的字段,所以,默認是不允許的,造成了客戶端沒辦法拿到數(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
      }
    

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

我是山豆 我的gitHub

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/97043.html

相關(guān)文章

  • Ajax跨域

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

    xiaotianyi 評論0 收藏0
  • 九種 “姿勢” 讓你徹底解決跨域問題

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

    charles_paul 評論0 收藏0
  • 大話javascript 5期:跨域

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

    jzzlee 評論0 收藏0
  • Fetch&CORS簡單實驗

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

    Zack 評論0 收藏0
  • 前端常見跨域解決方案(全)

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

    canger 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<