最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Cors跨域(一)：深入理解跨域請求概念及其根因

前言

你好，我是YourBatman。

成都創(chuàng)新互聯(lián)公司專注于郫都企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城網(wǎng)站定制開發(fā)。郫都網(wǎng)站建設(shè)公司,為郫都等地區(qū)提供建站服務(wù)。全流程按需定制，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

做Web開發(fā)的小伙伴對“跨域”定并不陌生，像狗皮膏藥一樣粘著幾乎每位同學(xué)，對它可謂既愛又恨?？缬蛘埱笾趧?chuàng)業(yè)、小型公司來講是個(gè)頭疼的問題，因?yàn)檫@類企業(yè)還未沉淀出一套行之有效的、統(tǒng)一的解決方案。

讓人擔(dān)憂的是，據(jù)我了解不少程序員同學(xué)(不乏有高級(jí)開發(fā))碰到跨域問題大都一頭霧水：

然后很自然的 用谷歌去百度一下搜索答案，但相關(guān)文章可能參差不齊、魚龍混雜。短則半天長則一天(包含改代碼、部署等流程)此問題才得以解決，一個(gè)“小小跨域”問題成功偷走你的寶貴時(shí)間。

既然跨域是個(gè)如此常見(特別是當(dāng)下前后端分離的開發(fā)模式)，因此深入理解CORS變得就異常的重要了(反倒前端工程師不用太了解)，因此早在2019年我剛開始寫博客那會(huì)就有過較為詳細(xì)的系列文章：

現(xiàn)在把它搬到公眾號(hào)形成技術(shù)專欄，并且加點(diǎn)料，讓它更深、更全面、更系統(tǒng)的幫助到你，希望可以助你從此不再怕Cors跨域資源共享問題。

本文提綱

版本約定

  • JDK：8
  • Servlet：4.x

正文

文章遵循一貫的風(fēng)格，本文將采用概念 + 代碼示例的方式，層層遞進(jìn)的進(jìn)行展開敘述。那么上菜，先來個(gè)示例預(yù)覽，模擬一下跨域請求，后面的一些的概念示例將以此作為抓手。

模擬跨域請求

要模擬跨域請求的根本是需要兩個(gè)源：讓請求的來源和目標(biāo)源不一樣。這里我就使用IDEA作為靜態(tài)Web服務(wù)器(63342)，Tomcat作為后端動(dòng)態(tài)Servlet服務(wù)器(8080)。

說明：服務(wù)器都在本機(jī)，端口不一樣即可

前端代碼

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
    3. 
  
  
  
  
  3. 
  
  
  
  
  4.     
    5. 
  
  
  
  
  5.     CORS跨域請求
    6. 
  
  
  
  
  6.     
    7. 
  
  
  
  
  7.     
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. 
  
  
  
  
  10. 跨域從服務(wù)端獲取內(nèi)容
    11.

  •  使用IDEA作為靜態(tài)web服務(wù)器，瀏覽器輸入地址即可訪問(注：端口號(hào)為63342)：

    后端代碼

    后端寫個(gè)Servlet來接收cors請求

     
 
 
 
      
  
  
  
  
    1. /**
      2. 
  
  
  
  
    2.  * 在此處添加備注信息
      3. 
  
  
  
  
    3.  *
      4. 
  
  
  
  
    4.  * @author YourBatman. Send email to me
      5. 
  
  
  
  
    5.  * @site https://yourbatman.cn
      6. 
  
  
  
  
    6.  * @date 2021/6/9 10:36
      7. 
  
  
  
  
    7.  * @since 0.0.1
      8. 
  
  
  
  
    8.  */
      9. 
  
  
  
  
    9. @Slf4j
      10. 
  
  
  
  
    10. @WebServlet(urlPatterns = "/cors")
      11. 
  
  
  
  
    11. public class CorsServlet extends HttpServlet {
      12. 
  
  
  
  
    12. 
  
  
  
  
    13.     @Override
      14. 
  
  
  
  
    14.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      15. 
  
  
  
  
    15.         String requestURI = req.getRequestURI();
      16. 
  
  
  
  
    16.         String method = req.getMethod();
      17. 
  
  
  
  
    17.         String originHeader = req.getHeader("Origin");
      18. 
  
  
  
  
    18. 
  
  
  
  
    19.         log.info("收到請求：{}，方法：{}， Origin頭：{}", requestURI, method, originHeader);
      20. 
  
  
  
  
    20.         resp.getWriter().write("hello cors...");
      21. 
  
  
  
  
    21.     }
      22. 
  
  
  
  
    22. }
      23.

    啟動(dòng)后端服務(wù)器，點(diǎn)擊頁面上的按鈕，結(jié)果如下：

    服務(wù)端控制臺(tái)輸出：

     
 
 
 
      
  
  
  
  
    1. ... INFO  c.y.cors.servlet.CorsServlet - 收到請求：/cors，方法：GET， Origin頭：http://localhost:63342
      2.

    服務(wù)端輸出日志，說明即使前端的Http Status是error，但服務(wù)端還是收到并處理了這個(gè)請求的下面以此代碼示例為基礎(chǔ)，普及一下和Cors跨域資源共享相關(guān)的概念。

    Host、Referer、Origin的區(qū)別

    這哥三看起來很是相似，下面對概念作出區(qū)分。

    1.Host：去哪里。域名+端口。值為客戶端將要訪問的遠(yuǎn)程主機(jī)，瀏覽器在發(fā)送Http請求時(shí)會(huì)帶有此Header

    2.Referer：來自哪里。協(xié)議+域名+端口+路徑+參數(shù)。當(dāng)前請求的來源頁面的地址，服務(wù)端一般使用 Referer 首部識(shí)別訪問來源，可能會(huì)以此進(jìn)行統(tǒng)計(jì)分析、日志記錄以及緩存優(yōu)化等

    • 來源頁面協(xié)議為File或者Data URI(如頁面從本地打開的)
    • 來源頁面是Https，而目標(biāo)URL是http
    • 瀏覽器地址欄直接輸入網(wǎng)址訪問，或者通過瀏覽器的書簽直接訪問
    • 使用JS的location.href跳轉(zhuǎn)
    • ...

    常見應(yīng)用場景：百度的搜索廣告就會(huì)分析Referer來判斷打開站點(diǎn)是從百度搜索跳轉(zhuǎn)的，還是直接URL輸入地址的

    一般情況下瀏覽器會(huì)帶有此Header，但這些case不會(huì)帶有Referer這個(gè)頭

    3.Origin：來自哪里(跨域)。協(xié)議+域名+端口。它用于Cors請求和同域POST請求

    可以看到Referer與Origin功能相似，前者一般用于統(tǒng)計(jì)和阻止盜鏈，后者用于CORS請求。但是還是有幾點(diǎn)不同：

    1.只有跨域請求，或者同域時(shí)發(fā)送post請求，才會(huì)攜帶Origin請求頭;而Referer只要瀏覽器能獲取到都會(huì)攜帶(除了上面說明的幾種case外)

    2.若瀏覽器不能獲取到請求源頁面地址(如上面的幾種case)，Referer頭不會(huì)發(fā)送，但Origin依舊會(huì)發(fā)送，只是值是null而已(注：雖然值為null，但此請求依舊屬于Cors請求哦)，如下圖所示：

    3.Origin的值只包括協(xié)議、域名和端口，而Rerferer不但包括協(xié)議、域名、端口還包括路徑，參數(shù)，注意不包括hash值

    瀏覽器的同源策略

    瀏覽器的職責(zé)是展示/渲染document、css、script腳本等，但是這些資源(將document、css、script統(tǒng)一稱為資源)可能來自不同的地方，如本地、遠(yuǎn)程服務(wù)器、甚至黑客的服務(wù)器......瀏覽器作為萬維網(wǎng)的入口，是我們接入互聯(lián)網(wǎng)最重要的軟件之一(甚至沒有之一)，因此它的安全性顯得尤為重要，這就出現(xiàn)了瀏覽器的同源策略。

    同源策略是瀏覽器一個(gè)重要的安全策略，它用于限制一個(gè)origin源的document或者它加載的腳本如何能與另一個(gè)origin源的資源進(jìn)行交互。它能幫助阻隔惡意文檔，減少(并不是杜絕)可能被攻擊的媒介。

    方便和安全往往是相悖的：安全性增高了，方便性就會(huì)有所降低那么問題來了，什么才算同源?

    同源的定義

    URL被稱作：統(tǒng)一資源定位符，同源是針對URL而言的。一個(gè)完整的URL各部分如下圖所示：

    Tips：域名和host是等同的概念，域名+端口號(hào) = host+端口號(hào)(大部分情況下你看到域名并沒有端口號(hào)，那是采用了默認(rèn)端口號(hào)80而已)同源：只和上圖的前兩部分(protocol + domain)有關(guān)，規(guī)則為：全部相同則為同源。這個(gè)定義不難理解，但有幾點(diǎn)需要再強(qiáng)調(diào)一下：

    • 兩部分必須完全一樣才算同源
    • 這里的domain包含port端口號(hào)，所以總共是兩部分而非三部分

    當(dāng)然也有說三部分的(協(xié)議+host+port)，理解其含義就成

    下面通過舉例來徹底了解下。譬如，我的源URL為：http://www.baidu.com/api/user，下面表格描述了不同URL的各類情況：

    不同源的網(wǎng)絡(luò)訪問

    瀏覽器同源策略的存在，限制了不同源之間的交互，實(shí)為不便。但是瀏覽器也開了一些“綠燈”，讓其不受同源策略的約束。此種情況一般可分為如下三類：

    1.跨域?qū)懖僮?Cross-origin writes)：一般是被允許的。如鏈接(如a標(biāo)簽)、重定向以及表單提交(如form表單的提交)

    2.跨域資源嵌入(Cross-origin embedding)：一般是允許的。比如下面這些例子：

    • 標(biāo)簽嵌入js腳本
    • 標(biāo)簽嵌入CSS
    • 展示的圖片
    • 、 、嵌入的插件
    • CSS中使用@font-face引入字體
    • 通過