1. 跨域问题
-
浏览器同源策略
-
同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源;
-
源 :协议、域名和端口号;
-
ajax无法跨域
2. jsonp
JSONP
(JSON with Padding)是JSON
的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题;- 一般来说位于
server1.example.com
的网页无法与不是server1.example.com
的服务器沟通,而 HTML 的<script>
元素是一个例外; - 利用
<script>
元素的这个开放策略,网页可以得到从其他来源动态产生的JSON
资料,而这种使用模式就是所谓的JSONP
; - 用
JSONP
抓到的资料并不是JSON
,而是任意的JavaScript
,用JavaScript
直译器执行而不是用JSON
解析器解析
2-1. 动态创建script实现请求
- 请求
<script>
let btn = document.querySelector("button");
// 根据响应输出服务器传的参
function cbfn(res){
console.log(res);
}
btn.onclick = function(){
let o = document.createElement('script');
o.src = "http://localhost:4000/getAjax?cb=cbfn";
document.querySelector("head").appendChild(o);
}
</script>
- 响应
router.get("/getAjax",(ctx,next)=>{
console.log("4000 run ");
let cb = ctx.query.cb;
let obj = {
a:20,
b:10
}