跨域請求的解決方案

什麼是同源策略

• 就是當 瀏覽器前端 向 服務器後端 發送請求時，此時的 發送方地址 和 接收方地址 的 傳輸協議、域名、端口號有任何一個不一致，那麼就請求失敗，從而觸發了同源策略
• 那當我們的請求觸發了同源策略後，該如何解決呢？也就是如何實現跨域請求呢？請繼續往下觀看。

解決跨域請求

1.jsonp 解決方案

• 通常我們在編寫前端頁面的時候，會經常用到script、img、link等標籤去請求一些外部的數據渲染到頁面上，可能你們沒有發現，請求的這些數據都是跨域的，但是並沒有觸發同源策略；因此我們可以肯定這幾個標籤是不受同源策略限制的。
• 什麼是jsonp呢？讓其不受同源策略影響的標籤幫我發送http請求，這樣的請求發起方式我們稱之爲jsonp。
• 因此我們用 script 標籤 來測試一下跨域請求
• 步驟

1.創建一個script標籤，script標籤裏面寫好請求目標路徑，讓script標籤發起請求;
2.將創建的script標籤放入到頁面中
3.然後定義一個全局函數 比如callback 用來接收請求返回的結果

瀏覽器請求

        document.getElementById("btn").onclick = function(){
            var script_ele = document.createElement("script");
            script_ele.src = "http://localhost/php/day25/代碼/06_data.php";
            // console.log(script_ele);
            // 如果想要讓script標籤可以發起請求那麼我們必須要把標籤放在頁面之中;
            document.body.appendChild(script_ele);
            // 使用完了就刪除;
            script_ele.onload = function(){
                script_ele.remove();
            }
        }
       function callback( res ){
            console.log(res);
        }

服務器接收（我們用php 來搭建一個簡單的後端，用來返回數據）

<?php
    // 函數調用;
    // 傳遞一個json對象過來
    // jsonp 規則是這樣的 被函數調用包裹的json;
    echo 'callback({"a":10,"b":20})';
?>

此時請求得到的結果就是在後端裏執行的callback函數的結果，說明請求成功！實現了跨域請求！

2.CORS 解決方案

用CORS解決跨域請求非常簡單，只需要編寫一行 後端的代碼 即可實現

瀏覽器請求（用已經封裝好的ajax發一個簡單的請求路徑）

<script>
        ajax({
            url : "http://127.0.0.1/php/day26/04_CORS.php",
            success : function(res){
                console.log(res);
            }
        })
    </script>

服務器接收

<?php
//跨域請求解決代碼
    header("Access-Control-Allow-Origin:*");
    echo "hello world";
?>

此時請求得到的結果 hello world ，說明請求成功！實現了跨域請求！

3.代理

就是用本地的服務器作爲代理，請求外界服務器，然後將請求的結果返回給瀏覽器

1.需要修改服務器的配置文件
2.就拿Nginx 服務器來測試
3.需要找到該服務器的目錄中的 Nginx1.15.11\conf\vhosts 這個路徑中的localhost_80.conf 文件
4.進行代理配置，將其請求的接口路徑寫進去
5.重啓本地服務器

接口路徑（百度的接口路徑）

location = /baidu {
            proxy_pass https://www.baidu.com/sugrec;
        }

瀏覽器請求（用已經封裝好的ajax發送請求就可以了）

var options = {
            url : "http://localhost/baidu",
            success : function(res){
                console.log(res);
            },
            dataType : "json"
            ,
            data : {
                prod : "pc",
                sugsid : "1423,31169,21125,30839,31187,30823,22159",
            }
        }
        ajax(options)

此時請求得到的結果 就是百度的接口所返回來的結果 ，說明請求成功！實現了跨域請求！