一、jsonp跨域
- jsonp跨域原理
script、img、link、iframe,这些标签不存在跨域请求的限制
jsonp跨域请求即是利用了script标签不存在跨域请求的限制这一特点
jsonp跨域请求的原理图如下:
【示例一】
自创建服务器,并向其请求数据
---serverJsonp.js
//创建jsonp跨域服务器端(http:/127.0.0.1:8001\list)
let express = require("express");
app = express();
app.listen(8001,()=>{
console.log("127.0.0.1:8001")
});
app.get("/list",(req,res)=>{
let {
callback=Function.prototype
} = req.query; //由客户端接收到的函数callback
let data = { //向客户端返回的数据
code:0,
message:"服务器准备的数据"
};
//返回callback(data) 字符串
res.send(`${callback}(${JSON.stringify(data)})`);
})
---jsonp.js
//客户端请求
$.ajax({
method:"get",
url:":http://127.0.0.1:8001\list",
dataType:"jsonp", //执行的为jsonp请求
success:res=>{
console.log(res);
}
});
---jsonp.html
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--加载jsonp的js代码-->
<script src="./jsonp.js"></script>
启动服务器
PS E:\vscode\node\跨域\jsonpkuayu> node serverJsonp
127.0.0.1:8001
浏览器打开html页面,输出请求到地数据
【示例二】
常见api 请求,以百度关键字搜索api为例
---jsonp.js
$.ajax({
method:"get",
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=火车&cb=getData",
dataType:"jsonp", //执行的为jsonp请求
jsonpCallback:"getData",
success:res=>{
console.log(res);
}
});
---jsonp.html
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--加载jsonp的js代码-->
<script src="./jsonp.js"></script>
浏览器打开html文件
注:jsonp跨域请求只能处理GET请求
二、CORS跨域资源共享
- 客户端发送ajax/fetch请求
<script src="../node_modules/axios/dist/axios.js"></script>
<script>
axios.get("http://127.0.0.1:8001/list")
.then(res=>{
console.log(res);
})
</script>
- 服务端设置相关的请求头信息(包括设置允许哪些源可以跨域,设置跨域方式等,需要处理options试探性请求)
//Access-Control-Allow-Origin设置允许跨域的源,可以设置为具体地址(一个) 或者 *(所有)
res.header("Access-Control-Allow-Origin",*);
//或者
res.header("Access-Control-Allow-Origin","http://127.0.0.1:8000");
//设置跨域方式
res.header("Access-Control-Allow-Methods","PUT,POST,GET,HEAD,DELETE,OPTIONS");
......
//处理试探性请求
if(res.method === "OPTIONS"){
res.send("OK");
return;
}
注:在需要共享资源给其他网站时,将允许跨域的网站设置 ’ * ',表示可以向任意源跨域,不安全,也就不能再允许携带cookie,设置为一个具体地址,可以携带cookie,但不能进行多源跨域。
待补充—http proxy