當地也可以輕鬆模仿跨域要求，以及處理跨域要求的體式格局

1、輕鬆完成當地服務器跨域要求

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域名差別，也即跨域

2、處理跨域要求（服務器端設置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"}';

（如許就可以輕鬆完成跨域要求）

3、處理跨域要求（服務器端設置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"}';

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

4、跨域要求jsonp（明白jsonp道理）

jsonp的完成分三步走：

• 1、當地js定義好回調函數
• 2、建立可以跨域要求的script標籤，實在src即為帶了回調函數查詢參數的接口url
• 3、在php的接口文件里獲取回調函數，並返回由回調函數包裹數據的團體

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

//2、經由過程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 . ")";

5、跨域要求自我憧憬（設置要求頭裡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要求里設置不了該字段的值