1.同源策略
1.1源
源（origin）就是协议、域名和端口号,我们在浏览器里面可以用window.origin知道.
1.2同源
若地址里面的协议、域名和端口号均相同则属于同源
1.3同源策略的定义
如果JS运行在源A里面,只能获取源A的数据,不能获取源B的数据,这是浏览器的规定.
1.3.2同源策略的意义
这样是为了保护隐私,因为如果能同源的话黑客随时可以黑你的电脑,可怕…
2CORS(跨源资源共享)
2.1CORS的定义
跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种基于HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。
2.2如何去设置CORS
1.Access-Control-Allow-Origin: *表明，该资源可以被任意外域访问
2.Access-Control-Allow-Origin: http://foo.example,表示就是该网站可以访问
举例说明:
frank.com想访问qq.com里面的json文件
image.png
如果不设置CORS的话,则是这个报错
image.png
如果设置CORS的话,我们可以看到正常的运行代码
image.png
response.setHeader('Access-Control-Allow-Origin','http://frank.com:9999')
3.JSONP
3.1JSONP和JSON的关系
没有任何关系
3.2JSONP用在什么地方
当在比较老的浏览器里面不能用CORS,这个时候可以用JSONP, 主要就是利用了 script 标签的src没有跨域限制来完成的,主要是写一个回调函数,参数就是从其他源拿的数据.在此我向大家推荐一个架构学习交流圈。交流学习指导伪鑫：1253431195（里面有大量的面试题及答案）里面会分享一些资深架构师录制的视频录像：有Spring，MyBatis，Netty源码分析，高并发、高性能、分布式、微服务架构的原理，JVM性能优化、分布式架构等这些成为架构师必备的知识体系。还能领取免费的学习资源，目前受益良多
举例说明(还是qq.com和frank.com两个网站来模拟):
qq.com后台的服务器
var http = require('http')var fs = require('fs')var url = require('url')var port = process.argv[2]if(!port){ console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
process.exit(1)
}
var server = http.createServer(function(request, response)
{
var parsedUrl = url.parse(request.url, true)
var pathWithQuery = request.url
var queryString = '' if(pathWithQuery.indexOf('?') >= 0)
{
queryString = pathWithQuery.substring(pathWithQuery.indexOf('?'))
}
var path = parsedUrl.pathname
var query = parsedUrl.query var method = request.method
/******** 从这里开始看，上面不要看 ************/
console.log('有个傻子发请求过来啦！路径（带查询参数）为：' + pathWithQuery)
if(path === '/index.html')
{
response.statusCode = 200
response.setHeader('Content-Type', 'text/html;charset=utf-8') response.write(fs.readFileSync('index.html'))
response.end()
}
else if(path === '/qq.js'){
response.statusCode = 200
response.setHeader('Content-Type', 'text/javascript;charset=utf-8') response.write(fs.readFileSync('qq.js'))
response.end()
}
else if(path ==='/friends.json')
{
response.statusCode = 200
response.setHeader('Content-Type', 'text/json;charset=utf-8') console.log(request.headers['referer'])
response.setHeader('Access-Control-Allow-Origin','http://frank.com:9999') response.write(fs.readFileSync('friends.json'))
response.end()
}
else if(path ==='/friends.js')
{ if(request.headers['referer'].indexOf('http://frank.com:9999')===0){ response.statusCode = 200
response.setHeader('Content-Type', 'text/javascript;charset=utf-8') const string=fs.readFileSync('friends.js').toString()
const data=fs.readFileSync('friends.json').toString()
const string2=string.replace('{{data}}',data).replace('{{xxx}}',query.callback) response.write(string2)
response.end()
}
else
{
response.statusCode=404
response.end()
};
}
else
{
response.statusCode = 404
response.setHeader('Content-Type', 'text/html;charset=utf-8') response.write(`你输入的路径不存在对应的内容`)
response.end()
}
/******** 代码结束，下面不要看 ************/})
server.listen(port)console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)
前端的代码
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我是黑客</title></head>
<body> 你好黑客 <script src="frank.js"></script></body>
</html>
JSONP代码
function jsonp(url){
return new Promise((resolve,reject)=>
{
const random='frankJSONPCallbackName'+Math.random() window[random]=(data)=>{
resolve(data);
}
const script=document.createElement('script')
script.src=`${url}?callback=${random}`
script.onload=()=>
{
script.remove;
};
script.onerror=()=>
{
reject();
}
document.body.appendChild(script)
})}
jsonp("http://qq.com:8888/friends.js").then(data =>
{
console.log(data); });
效果
image.png
3.3优缺点
1.优点:它的兼容性更好，在更加古老的浏览器中都可以运行
2.缺点:它只支持GET请求而不支持POST等其它类型的HTTP请求,同时jsonp在调用失败的时候不会返回各种HTTP状态码.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
