前端築基篇(一)->ajax跨域原理以及解決方案

来源:http://www.cnblogs.com/dailc/archive/2016/09/21/5893341.html
-Advertisement-
Play Games

說明 跨域主要是由於瀏覽器的“同源策略”引起,分為多種類型,本文主要探討Ajax請求跨域問題 前言 參考來源 什麼是跨域 ajax跨域的表現 跨域的原理 如何解決跨域問題 JSONP方式解決跨域問題 CROS解決跨域問題 CROS請求原理 PHP後臺配置 JAVA後臺配置 .NET後臺配置 FAQ ...


說明

跨域主要是由於瀏覽器的“同源策略”引起,分為多種類型,本文主要探討Ajax請求跨域問題

前言

強烈推薦閱讀參考來源中的文章,能夠快速幫助瞭解跨域的原理

參考來源

本文參考了以下來源

什麼是跨域

為了更瞭解跨域的原理,可以閱讀參考來源中的文章,裡面對跨域的原理講解很詳細到位

ajax跨域的表現

ajax請求時,如果存在跨域現象,並且沒有進行解決,會有如下表現

  • 第一種現象:No 'Access-Control-Allow-Origin' header is present on the requested resource,並且The response had HTTP status code 404 ,如圖

    出現這種情況的原因如下

    • 本次ajax請求是“非簡單請求”,所以請求前會發送一次預檢請求(OPTIONS)
    • 伺服器端後臺介面沒有允許OPTIONS請求,導致無法找到對應介面地址
  • 第二種現象:No 'Access-Control-Allow-Origin' header is present on the requested resource和The response had HTTP status code 405 ,如圖

    這種現象和第一種有區別,這種情況下，後臺方法允許OPTIONS請求,但是一些配置文件中(如安全配置),阻止了OPTIONS請求,才會導致這個現象

  • 第三種現象:No 'Access-Control-Allow-Origin' header is present on the requested resource,如圖

    這種現象和第一種和第二種有區別,這種情況下，伺服器端後臺允許OPTIONS請求,並且介面也允許OPTIONS請求,但是頭部匹配時出現不匹配現象 比如origin頭部檢查不匹配,比如少了一些頭部的支持(如常見的X-Requested-With頭部),然後服務端就會將response返回給前端,前端檢測到這個後就觸發XHR.onerror,導致前端控制台報錯

  • 註意,一般進行跨域分析的請求都是在ajax請求出現跨域情況的,而且用普通的http請求不會出現問題的

跨域的原理

之所以ajax出現請求跨域錯誤問題,主要原因就是因為瀏覽器的“同源策略”,可以參考 瀏覽器同源政策及其規避方法(阮一峰)

如何解決跨域問題

一般ajax跨域解決就是通過JSONP解決或者CROS解決,如以下(註意,ajax跨域只是屬於瀏覽器"同源策略"中的一部分,其它的還有Cookie跨域iframe跨域,LocalStorage跨域等這裡不做介紹)

JSONP方式解決跨域問題

jsonp解決跨域問題是一個比較古老的方案(實際中不推薦使用),這裡做簡單介紹

實際項目中如果要使用JSONP,一般會使用JQ等對JSONP進行了封裝的類庫來進行ajax請求

實現原理

JSONP之所以能夠用來解決跨域方案,主要是因為 <script> 腳本擁有跨域能力,而JSONP正是利用這一點來實現。具體原理如圖

實現流程

JSONP的實現步驟大致如下(參考了來源中的文章)

  • 客戶端網頁網頁通過添加一個<script>元素，向伺服器請求JSON數據，這種做法不受同源政策限制 
    function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('response data: ' + JSON.stringify(data));
};

    請求時,介面地址是作為構建出的腳本標簽的src的,這樣,當腳本標簽構建出來時,最終的src是介面返回的內容

  • 服務端對應的介面在返回參數外面添加函數包裹層 
    foo({
  "test": "testData"
});
  • 由於<script>元素請求的腳本，直接作為代碼運行。這時，只要瀏覽器定義了foo函數，該函數就會立即調用。作為參數的JSON數據被視為JavaScript對象，而不是字元串，因此避免了使用JSON.parse的步驟。

    註意,一般的JSONP介面和普通介面返回數據是有區別的,所以介面如果要做JSONO相容,需要進行判斷是否有對應callback關鍵字參數,如果有則是JSONP請求,返回JSONP數據,否則返回普通數據

使用註意

基於JSONP的實現原理,所以JSONP只能是“GET”請求,不能進行較為複雜的POST和其它請求,所以遇到那種情況,就得參考下麵的CROS解決跨域了

CROS解決跨域問題

CORS是一個W3C標準，全稱是"跨域資源共用"（Cross-origin resource sharing）。它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而剋服了AJAX只能同源使用的限制。

基本上目前所有的瀏覽器都實現了CORS標準,其實目前幾乎所有的瀏覽器ajax請求都是基於CORS機制的,只不過可能平時前端開發人員並不關心而已(所以說其實現在CROS解決方案主要是考慮後臺該如何實現的問題)。

強烈推薦閱讀 跨域資源共用 CORS 詳解(阮一峰)

CROS請求原理

實現原理如下圖(簡化版本)

  • 如何判斷是否是簡單請求?

    瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。只要同時滿足以下兩大條件，就屬於簡單請求。

    • 請求方法是以下三種方法之一：

      HEAD,GET,POST

    • HTTP的頭信息不超出以下幾種欄位：

      Accept,Accept-Language,Content-Language,Last-Event-ID,Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

PHP後臺配置

PHP後臺得配置幾乎是所有後臺中最為簡單的,遵循如下步驟即可

  • 第一步:配置Php 後臺允許跨域

    主要為跨域CROS配置的兩大基本信息,Origin和headers

  • 第二步:配置Apache web伺服器跨域

    一般每一個web伺服器安裝好都得配置下跨域信息

    以上這張圖片是在某一個網站上看到的,直接用來。但是具體的源地址已經找不到了...

JAVA後臺配置

JAVA後臺相對來說配置也比較簡單,只需要遵循如下步驟即可

  • 第一步:獲取依賴jar包

    下載 cors-filter-1.7.jar, java-property-utils-1.9.jar 這兩個庫文件放到lib目錄下。(放到對應項目的webcontent/WEB-INF/lib/下)

  • 第二步:如果項目用了Maven構建的,請添加如下依賴到pom.xml中:(非maven請忽視) 
    <dependency>
	<groupId>com.thetransactioncompany</groupId>
	<artifactId>cors-filter</artifactId>
	<version>[ version ]</version>
</dependency>

    其中版本應該是最新的穩定版本,CROS過濾器

  • 第三步:添加CROS配置到項目的Web.xml中( App/WEB-INF/web.xml) 
    <!-- 跨域配置-->	
<filter>
		<!-- The CORS filter with parameters -->
		<filter-name>CORS</filter-name>
		<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
		
		<!-- Note: All parameters are options, if omitted the CORS 
		     Filter will fall back to the respective default values.
		  -->
		<init-param>
			<param-name>cors.allowGenericHttpRequests</param-name>
			<param-value>true</param-value>
		</init-param>
		
		<init-param>
			<param-name>cors.allowOrigin</param-name>
			<param-value>*</param-value>
		</init-param>
		
		<init-param>
			<param-name>cors.allowSubdomains</param-name>
			<param-value>false</param-value>
		</init-param>
		
		<init-param>
			<param-name>cors.supportedMethods</param-name>
			<param-value>GET, HEAD, POST, OPTIONS</param-value>
		</init-param>
		
		<init-param>
			<param-name>cors.supportedHeaders</param-name>
			<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
		</init-param>
		
		<init-param>
			<param-name>cors.exposedHeaders</param-name>
			<!--這裡可以添加一些自己的暴露Headers   -->
			<param-value>X-Test-1, X-Test-2</param-value>
		</init-param>
		
		<init-param>
			<param-name>cors.supportsCredentials</param-name>
			<param-value>true</param-value>
		</init-param>
		
		<init-param>
			<param-name>cors.maxAge</param-name>
			<param-value>3600</param-value>
		</init-param>

	</filter>

	<filter-mapping>
		<!-- CORS Filter mapping -->
		<filter-name>CORS</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

    請註意,以上配置文件請放到web.xml的前面,作為第一個filter存在(可以有多個filter的)

NET後臺配置

.NET後臺配置相比前面兩者,複雜一點,可以參考如下步驟

  • 第一步:網站配置

    打開控制面板，選擇管理工具,選擇iis;右鍵單擊自己的網站，選擇瀏覽;打開網站所在目錄,用記事本打開web.config文件添加下述配置信息,重啟網站

    請註意,以上截圖較老,如果配置仍然出問題,可以考慮增加更多的headers允許,比如

    "Access-Control-Allow-Headers":"X-Requested-With,Content-Type,Accept"

    或者添加更多的自定義頭部

  • 第二步:其它更多配置

    如果第一步進行了後,仍然有跨域問題,可能是因為後臺的介面沒有運行OPTIONS請求的原因,請將[System.Web.Mvc.HttpPost]去掉,讓介面支持更多請求

FAQ

multi value '*,*' 的問題

  • 出現原因

    這個問題出現的原因是由於後臺響應的http頭部信息有兩個Access-Control-Allow-Origin:*。常見於.net後臺(一般在web.config中配置了一次origin,然後代碼中又手動添加了一次origin)

  • 表現現象

    如圖

  • 解決方法

    將代碼中手動添加的Origin:*去掉(註意,如果去除config中的配置,會導致跨域問題,只有去除代碼中自己加上的才行...)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [deviceone開發]-天氣demo
    一、簡介 該demo主要實現定位功能，讀取天氣信息，語音播報功能。其中定位需要配置key，調試二維碼請到論壇中下載！ 二、效果圖 三、相關討論 http://bbs.deviceone.net/forum.php?mod=viewthread&tid=850&extra=page%3D1 四、源碼地 ...
  • c/s用戶與伺服器之間的傳輸
    ####第一頁 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
  • TypeScript之面向對象初體驗
    1、安裝nodejs和vscode： nodejs : https://nodejs.org/en/ Visual Studio Code : https://www.visualstudio.com/en-us/products/code-vs.aspx 安裝是很簡單的，一路next就行，此處不詳 ...
  • 分享20個新穎的字體設計草圖，帶給你靈感
    通常我們對最終設計至關重要，但在幕後有很多流程，例如草圖。 草圖是是把想法作為一種思想框架描繪出來。 有時客戶需要一個獨特的品牌新標識或字體更方便畫在紙上，之後掃描到 Photoshop 和 Illustrator。這裡分享20個新穎的字體設計草圖，帶給你靈感。 ...
  • 轉載：TypeScript 簡介與《TypeScript 中文入門教程》
    簡介 TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。安德斯·海爾斯伯格，C#的首席架構師，已工作於TypeScript的開發。 TypeScript擴展了 JavaScript 的句法， ...
  • CSS border邊框屬性教程(color style)
    CSS 邊框即CSS border-border邊框樣式顏色、邊框樣式、邊框寬度的語法結構與應用案例教程篇 一、CSS 邊框基礎知識 CSS 邊框即CSS border是控制對象的邊框邊線寬度、顏色、虛線、實線等樣式CSS屬性。同時大家可以進入碼農教程提供CSS手冊查看border手冊：http:/ ...
  • 今天第一次接觸到typescript，看了第一個知識點就是變數的聲明，來回憶回憶，做做筆記
    以前只用過JavaScript原生寫網站特效，今天還是第一次聽說typescript的，然後看了一下它的基本知識，感覺很像Java，真的太像了，但是又有不同點。很讓我驚奇看到的第一個知識點就和以前不同，很新鮮。 變數的聲明： 在typescript中我知道的變數的聲明有兩種（除了var），分別是le ...
  • javascript_core_06
    1、RegExp：Regular Expression，創建封裝正則表達式： ①正則直接量：var reg=/reg/ig；②var reg=new RegExp（“reg”，“ig”）； 2、RegExp API： ①找每個關鍵詞，並獲得位置：var arr=reg.exec（str）；預設從頭開 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類