其實我只想設置客戶端實現跨域請求

本地也能夠輕鬆模擬跨域請求，以及解決跨域請求的方式

一、輕鬆實現本地服務器跨域請求

web.html請求接口json.json，其實它們都在相同的本地服務器目錄下

以localhost/cors/web.html訪問頁面，但是這個頁面調用的接口地址是http://127.0.0.1/cors/json.json

var url = "http://127.0.0.1/cors/json.json"
fetch(url)
    .then(res => res.json())
    .then(resJson => console.log(resJson))

localhost 與127.0.0.1域名不一樣，也即跨域

二、解決跨域請求（服務器端設置Access-Control-Allow-Origin:*）

//js
var url = "http://127.0.0.1/cors/php.php"
fetch(url)
    .then(res => res.json())
    .then(resJson => console.log(resJson))
    
//php
header('Access-Control-Allow-Origin:*');
echo '{"name": "lofayo"}';

（這樣就能輕鬆實現跨域請求）

三、解決跨域請求（服務器端設置Access-Control-Allow-Origin:http://localhost）

（服務器端設置響應頭 Access-Control-Allow-origin: *，容許了任何來源origin的訪問，其實這個地方能夠設置和請求頭相同的origin的值，只是這樣設置太麻煩了，本地測試須要服務端設置一次，若是本地測試同一個接口由多人請求，還要設置屢次，正式上線了還要設置一次，太麻煩了）

//js  http://localhost/cors/web.html
var url = "http://127.0.0.1/cors/php.php"
fetch(url)
    .then(res => res.json())
    .then(resJson => console.log(resJson))

//發起該請求，會在請求頭裏自動設置origin字段值爲當前頁面，如：origin:http://localhost


//php
//服務器端設置和origin相同的值
header('Access-Control-Allow-Origin:localhost');
echo '{"name": "lofayo"}';

（雖然能實現，一個接口從測試到上線須要服務器端屢次設置，太麻煩了）

四、跨域請求jsonp（理解jsonp原理）

jsonp的實現分三步走：

• 一、本地js定義好回調函數
• 二、建立能夠跨域請求的script標籤，其實src即爲帶了回調函數查詢參數的接口url
• 三、在php的接口文件裏獲取回調函數，並返回由回調函數包裹數據的總體

//一、定義好接收數據的函數
<script type="text/javascript">
    function requestName(json) {
        console.log(json);
    }
</script>

//二、經過script標籤的src實現跨域，只是這個url帶有查詢參數（回調函數）
<script src="http://127.0.0.1/cors/php.php?callback=requestName"></script>


//php文件接收查詢參數，並返回由回調函數包裹數據的總體
$requstName = $_GET['callback'];
$data = "{'name': 'lofayo'}";
echo $requstName . "(" . $data . ")";

五、跨域請求自我暢想（設置請求頭裏origin字段值和服務器相同）

全部上述跨域請求，都須要服務器端的參與設置，叨擾別人的事終究仍是麻煩了些。想實現的是，即便服務器端不容許跨域，可是僅僅在客戶端設置依然可以實現的跨域請求

好比：接口數據在http://127.0.0.1/cors/php.php

訪問頁面地址爲：http://localhost/cors/web.html，該頁面請求的接口，瀏覽器會在請求頭裏默認設置：

Origin:http://localhost
Referer:http://localhost/cors/web.html

既然如此，我只須要手動模擬origin字段值，把他設置爲和服務器相同的域不就能夠了，設置origin字段值：

Origin:http://127.0.0.1

可事與願違，在http請求裏設置不了該字段的值