其实我只想设置客户端实现跨域请求

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请求里设置不了该字段的值