AJAX?跨域解決方案?-?CORS

毛利輝 2021-09-09 12:11:46

什么是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://t1.abc.com','http://t2.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標簽。

    <meta http-equiv="Access-Control-Allow-Origin" content="*">
  • 方案二:

    //弊端:不支持 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 :
    
    <Directory />
     ? ?......
     ? ?Header set Access-Control-Allow-Origin *
    </Directory>

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

Thanks ~



發表評論
用戶反饋
客戶端