本地也可以轻松模拟跨域请求,以及解决跨域请求的方式
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、定义好接收数据的函数
function requestName(json) {
console.log(json);
}
//2、通过script标签的src实现跨域,只是这个url带有查询参数(回调函数)
//php文件接收查询参数,并返回由回调函数包裹数据的整体
$requstName = $_GET['callback'];
$data = "{'name': 'lofayo'}";
echo $requstName . "(" . $data . ")";
5、跨域请求自我畅想(设置请求头里origin字段值和服务器相同)
所有上述跨域请求,都需要服务器端的参与设置,叨扰别人的事终究还是麻烦了些。想实现的是,即使服务器端不允许跨域,但是仅仅在客户端设置依然能够实现的跨域请求
访问页面地址为:http://localhost/cors/web.html,该页面请求的接口,浏览器会在请求头里默认设置:
Origin:http://localhost
Referer:http://localhost/cors/web.html
既然如此,我只需要手动模拟origin字段值,把他设置为和服务器相同的域不就可以了,设置origin字段值:
Origin:http://127.0.0.1
可事与愿违,在http请求里设置不了该字段的值