AJAX 跨域解決方案 - CORS

YPHP 發布于2019-07-01 12:18 / 3392人閱讀

摘要：同源策略是對的一個主要約束，它為通信設置了相同的域相同的端口相同的協議這一限制。試圖訪問上述限制之外的資源都會引發安全錯誤，除非采用被認可的跨域解決方案。這個方案叫做跨源資源共享。方案二弊端不支持請求。方案三與方案一類似。

什么是AJAX？

AJAX 是無需刷新頁面就能夠從服務器去的數據的一種方法，負責Ajax運作的核心對象是XMLHttpRequest(XHR)對象。

同源策略是對XHR的一個主要約束，它為通信設置了“相同的域、相同的端口、相同的協議”這一限制。
試圖訪問上述限制之外的資源都會引發安全錯誤，除非采用被認可的跨域解決方案。

這個方案叫做CORS（Cross-Origin Resource Sharing）跨源資源共享。

哪些訪問屬于跨域？

http://a.com 不允許訪問 http://b.com(不同域)

http://a.com 不允許訪問 https://a.com(同一域名，不同協議)

http://a.com 不允許訪問 http://a.com:8080(同一域名，不同端口)

http://a.com 不允許訪問 http://192.168.1.1(域名和域名對應的ip)

http://a.a.com 不允許訪問 http://b.a.com(主域相同，子域不同)

三種解決方案：

方案一：

//弊端：存在瀏覽器兼容的問題

需要被請求方的服務端設置： Access-Control-Allow-Origin

切記：Access-Control-Allow-Origin 不可設置為 * ，設置為可訪問的域名。

//設置可供訪問的白名單
$white_list = ["http://cdn.abc.com","http://abc.com"];

$_SERVER["HTTP_ORIGIN"] //表示請求方的域名

$http_origin = "";
if (!empty($_SERVER["HTTP_ORIGIN"]) && in_array($_SERVER["HTTP_ORIGIN"],$white_list)) {
    $http_origin = $_SERVER["HTTP_ORIGIN"];

    //設置 header 信息
    header("Access-Control-Allow-Origin: {$http_origin}");
    header("Access-Control-Allow-Methods", "POST,GET");
    header("Access-Control-Allow-Credentials:true");  //允許訪問Cookie
    header("Access-Control-Allow-Headers : X-Requested-With"); //設置Headers
}
//執行代碼邏輯...

另：如果請求的是html，在文件里加上meta標簽。

方案二:

//弊端：不支持 POST 請求。

使用 JSONP 進行解決跨域問題，網上文章蠻多的。

方案三：

與方案一類似。

修改Nginx Apache 配置：

//Nginx

http {
  ......
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  ......
}

Apache :


    ......
    Header set Access-Control-Allow-Origin *

大家可以根據自己的情況進行選擇方案。

來源：http://mp.weixin.qq.com/s?__b...

Thanks ~

AD:

GPU云服務器云服務器 js ajax跨域解決方案 ajax跨域 jquery ajax 跨域 ajax跨域訪問

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

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

20K前端大佬面試(關于如何回答ajax跨域問題)

摘要：在接觸前端開發起，跨域這個詞就一直以很高的頻率在我們學習工作中重復出現，最近在工作中遇到了跨域的相關問題，這里我把它總結記錄一下。在接觸前端開發起，跨域這個詞就一直以很高的頻率在我們學習工作中重復出現，最近在工作中遇到了跨域的相關問題，這里我把它總結記錄一下。關于跨域，有N種類型，現在我只專注于ajax請求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹)，內容...

Yangyang 2019-08-02 16:09 評論0 收藏0
ajax跨域，這應該是最全的解決方案了

摘要：關于，強烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個實現原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。前言從剛接觸前端開發起，跨域這個詞就一直以很高的頻率在身邊重復出現，一直到現在，已經調試過N個跨域相關的問題了，16年時也整理過一篇相關文章，但是感覺還是差了點什么，于是現在重新梳理了一下。個人見識有限，如有差錯，請多多見諒，歡迎提出iss...

ytwman 2019-08-22 11:21 評論0 收藏0
再也不學AJAX了！（三）跨域獲取資源 ② - JSONP & CORS

摘要：瀏覽器的同源策略固然保障了互聯網世界的數據隱私與數據安全，但是如果當我們需要使用跨域請求資源時，同源策略又會成為開發者的阻礙。我們之前提到過，如果想要繞過瀏覽器同源策略，實現使用技術跨域獲取資源，需要服務端和客戶端的協同合作。瀏覽器的同源策略固然保障了互聯網世界的數據隱私與數據安全，但是如果當我們需要使用AJAX跨域請求資源時，同源策略又會成為開發者的阻礙。在本文中，我們會簡單介紹需...

enda 2019-08-21 17:55 評論0 收藏0
同源策略與CORS跨域

摘要：所以瀏覽器認為這是安全的。如果你細心的話你會發現，其實請求已經發送出去了，你只是拿不到響應而已。所以瀏覽器這個策略的本質是，一個域名的，在未經允許的情況下，不得讀取另一個域名的內容。但瀏覽器并不阻止你向另一個域名發送請求。同源策略與CORS跨域 PS:這篇文章是緊接著JSONP原理和Ajax學習與理解寫的,有些內容是承接了上兩篇文章.這篇文章只算是我的個人學習筆記,內容沒有經過精心排...

ninefive 2019-08-23 10:34 評論0 收藏0
【日常填坑】之ajax請求laravel的api接口

摘要：合適和夠用是最完美的追求。比如從頁面去請求的資源。它允許瀏覽器向跨源服務器，發出請求，從而克服了只能同源使用的限制。定義在中的路由都是無狀態的，并且會應用中間件組。關于作者程序開發人員，不拘泥于語言與技術，目前主要從事PHP和前端開發，使用Laravel和VueJs，App端使用Apicloud混合式開發。合適和夠用是最完美的追求。個人網站：http://www.linganm...

Arno 2019-06-27 15:31 評論0 收藏0