「JavaScript」JS兩種服務端相關跨域方法詳解

kid143 發布于2019-08-21 10:39 / 346人閱讀

摘要：之前我們講了一下四種跨域的方式四種跨域方式詳解。這四種方式是使用純來進行跨域的。今天就介紹兩種有涉及到服務器的跨域技術。

之前我們講了一下四種 JavaScript 跨域的方式 - 「JavaScript」四種跨域方式詳解。這四種方式是使用純 JavaScript 來進行跨域的。

今天就介紹兩種有涉及到服務器的跨域技術。

一、反向代理服務器

基礎思想很簡單，將你的服務器配置成 需要跨域獲取的資源的 反向代理服務器。

也就是說，將其他域名的資源映射到你自己的域名之下，這樣瀏覽器就認為他們是同源的。

用大家鐘愛的 Apache2 來舉個例子：

首先啟用兩個模塊 proxy 和 proxy_http 來開啟代理功能：

sudo a2enmod proxy
sudo a2enmod proxy_http

然后在配置文件里面寫入：

ProxyPass "/foo" "http://foo.example.com/bar"
ProxyPassReverse "/foo" "http://foo.example.com/bar"

ProxyPass: 遠程服務器在本地服務器的映射。（上面的例子將 http://foo.example.com/bar 映射為 /foo）

ProxyPassReverse: 配置 Apache2 在 HTTP 跳轉時調整 Location, Content-Location 和 URI headers 的值，防止反向代理被繞開。

重啟 Apache2：

sudo service apache2 restart

大功告成，這樣我們請求 /foo 就會得到 http://foo.example.com/bar 的內容了。

這種方法其實不太常用，機智的讀者就會發現，每一個資源都要到自己的服務器配置，每次配置都還要重啟。

二、CORS

Cross-Origin Resource Sharing 是 W3C 推出的一種跨站資源獲取的機制。

首先我們來看一下瀏覽器的支持情況：

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
4	3.5	8 & 9(XDomainRequest), 10	12	4

移動端的瀏覽器對這種方法的支持比較完善。
現在我們看到了，如果不需要兼容 IE6、7的話，就可以使用這種方法。

這種跨域方案主要的思想是：服務器 在響應頭中設置相應的選項，瀏覽器如果支持這種方法的話就會將這種跨站資源請求視為合法，進而獲取資源。

可以設置的響應頭信息：

Access-Control-Allow-Origin

Access-Control-Allow-Origin:  | *

origin: 被允許跨域訪問這個資源的網站，* 代表全部網站。瀏覽器會檢測這個參數，如果符合要求，才會去獲取資源。

舉個例子，允許 http://jasonkid.github.io/fezone 來跨域訪問這個資源：

Access-Control-Allow-Origin: http://jasonkid.github.io/fezone

Access-Control-Allow-Credentials

Access-Control-Allow-Credentials: true | false

表示是否允許瀏覽器攜帶 Cookie 來訪問這個資源。
這個屬性要和 XMLHttpRequest 的 withCredentials 屬性來配合使用。

var xhr = new XMLHttpRequest();
var url = "http://foo.other/resources/credentialed-content/";
    
if(xhr) {
    xhr.open("GET", url, true);
    xhr.withCredentials = true; // 設置帶有 Cookie 的資源請求
    xhr.onreadystatechange = handler;
    xhr.send(); 
}

能夠成功使用帶有 Cookie 的資源請求需要滿足以下幾個條件：

XMLHttpRequest 對象中指定了 withCredentials = true

服務器響應頭中 Access-Control-Allow-Credentials: true

服務器響應頭中 Access-Control-Allow-Origin 不能為 *

以下選項主要是安全性配置的問題，主要是服務器的配置問題了，就不展開介紹了：

Access-Control-Expose-Headers

Access-Control-Allow-Methods

Access-Control-Allow-Headers

其他四種跨域方式

「JavaScript」四種跨域方式詳解

云服務器 GPU云服務器兩種方法迷宮c語言兩種方法數據統計的兩種方法數據統計有兩種基本方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85952.html

「JavaScript」JS四種跨域方式詳解

摘要：超詳細并且帶的跨域指南來了本文基于你了解的同源策略，并且了解使用跨域跨域的理由。使用方法就是將符合上述條件頁面的設置為同樣的二級域名。這兩個網站都是協議，端口都是，且二級域名都是。超詳細并且帶 Demo 的 JavaScript 跨域指南來了！本文基于你了解 JavaScript 的同源策略，并且了解使用跨域跨域的理由。 1. JSONP 首先要介紹的跨域方法必然是 JSONP。 ...

wangym 2019-08-21 10:38 評論0 收藏0
AJAX的學習筆記

摘要：的學習筆記是異步和的縮寫，它的作用是執行異步的網絡請求。這就是一個格式的，向這個地址請求，將得到一個回調函數，執行就得到數據。 AJAX的學習筆記 AJAX是異步JavaScript和XML的縮寫，它的作用是執行異步的網絡請求。因為JS是線性同步，如果需要用戶向瀏覽器發送一個請求，那么就需要等瀏覽器接收到了結果才能繼續運行，如果發送到接受的時間太長，瀏覽器就會很長時間處于假死狀態，這樣...

RobinTang 2019-08-22 14:03 評論0 收藏0
解決跨域的兩種方案JSONP和CORS

摘要：由于第二種方法如今已經采用的非常少，所以我們在這兒不做講解一帶填充的是一種可以在中繞過同源策略，并發起跨域請求的使用模式，可以啟動的跨域請求同源策略有一個顯著的例外，腳本元素是可以規避檢查的。講跨域之前，我們先來講同源策略（SOP），同源策略是網景公司提出的一個著名安全策略。所謂同源就是域名、協議、端口相同。例如http://www.12306.cn中，http就是超文本傳輸協議，1...

曹金海 2019-08-22 11:05 評論0 收藏0
ajax 和jsonp 不是一碼事細讀詳解

摘要：只有兩種數據類型描述符，大括號和方括號，其余英文冒號是映射符，英文逗號是分隔符，英文雙引號是定義符。上述兩種集合中若有多個子項，則通過英文逗號進行分隔。鍵值對以英文冒號進行分隔，并且建議鍵名都加上英文雙引號，以便于不同語言的解析。由于Sencha Touch 2這種開發模式的特性，基本決定了它原生的數據交互行為幾乎只能通過AJAX來實現。當然了，通過調用強大的PhoneGap插件然后...

張金寶 2019-06-27 16:31 評論0 收藏0