当用AJAX跨越访问就会被拦截,此时就应用到JSONP
浏览器的同源策略
ajax网络请求是 如果当前页面来自于a服务器 但是想请求b服务器的资源就会被浏览器阻止
同源: 协议 ip port
https://www.baidu.com/index.html
http://www.baidu.com/ajax1 非同源
https://news.baidu.com/ajax1 非同源
https://www.mbaidu.com/index.html 非同源
https://www.baidu.com/index.html?user=karen 是同源的
只要ajax请求跨域的网址就会被阻止,但是我们可以利用非ajax做网络请求 解决跨域问题:
JSONP CORS 代理
//2.封装 //前端发送网络请求<script>function clicked () {var cb="hqyj"+new Date().getTime() //这样做调用函数的函数名就不会重复//这里在全局作用域下创建一个函数来接收返回后端数据window[cb]=function (arg) { console.log(arg) }var sr=document.createElement("script")sr.src=`http://192.168.5.109:8081/jsonp1?callback=${cb}`document.body.appendChild(sr)}</script>
//后端JSONP接口<script>var querystring=require("querystring")var url=require("url")module.exports={xx(req,res){res.end('{"name":"karen"}')},jsonp1(req,res){var query=url.parse(req.url).queryvar queryObj=querystring.parse(query)res.end(`${queryObj.callback}({name:"karen"})`)// 'fn1({name:"karen"})'}
}