网站内容更新策略( PS:这篇文章是紧接着JSONP原理和写的,有些内容是承接了上两篇文章..)
优采云 发布时间: 2021-10-10 16:05网站内容更新策略(
PS:这篇文章是紧接着JSONP原理和写的,有些内容是承接了上两篇文章..)
同源策略和CORS跨域
PS：这个文章是紧跟JSONP原理写的，部分内容是前两个文章的延续。
这个文章只是我个人的学习笔记，内容没有仔细排版，格式也没有仔细校对过。请原谅我的一些错误。
使用表单、a、img、链接、脚本。跨域发送请求
但！
同源策略：只允许相同的协议+端口+域名发送AJAX请求。
例如，我们向 Ajax 发送请求
请求成功，但是报错
加载失败，
因此，请求已发送，但未收到任何响应！
同源策略
AJAX请求只有在协议+端口+域名完全相同的情况下才允许
完全一样完全一样完全一样完全一样完全一样完全一样完全一样完全一样
我可以发送 AJAX 请求吗？不
:80 我可以向:81 发送 AJAX 请求吗？不
浏览器必须保证
AJAX请求只有在协议+端口+域名完全相同的情况下才允许
为什么会有同源策略？
为什么表单提交没有跨域问题，ajax提交却出现跨域问题？-方应航的回答-知乎
因为原页面通过表单提交到其他域名后，原页面的脚本无法获取新页面的内容。所以浏览器认为这是安全的。AJAX 可以读取响应内容，因此浏览器不允许您这样做。如果你细心，你会发现请求实际上已经发送了，只是得不到响应。所以浏览器策略的本质就是一个域名的JS未经许可就不能读取另一个域名的内容。但是浏览器不会阻止您向另一个域名发送请求。
简单的说，使用表单发送请求会刷新页面，所以原来的页面不再被认为是安全的。但是 Ajax 可以读取响应内容并将其显示在此页面上。存在安全问题
如果没有同源策略，那么任何网站都可以读取其他人的支付宝余额等。
CORS跨域
除了使用jsonp，还可以使用CORS
下面我们用两个网站来模拟Ajax跨域，解决跨域问题
先写前端ajax请求代码
let myButton = document.getElementById('myButton');
myButton.addEventListener("click",(e)=>{
let request = new XMLHttpRequest();
request.onreadystatechange = ()=>{
if(request.readyState ===4){
console.log("请求和响应都完毕了");
if ( request.status>=200&&request.status=400){
console.log("响应失败");
}
}
}
request.open('GET','http://jack.com:8002/xxx')//配置request.请求的路径为第二个网站的8002端口
request.send();//发送请求
})
服务端代码
else if (path === '/xxx') {
response.statusCode = 200
response.setHeader('Content-Type', 'text/xml;charset=utf-8')
response.write(`
{
"note":{
"from":"mataotao",
"to":"ni",
}
}
`)
response.end()
}
*敏*感*词*两个端口，然后使用：8001的网站向：8002网站发起请求，视为跨域请求
点击我后：
由于跨域问题，ajax请求没有发送成功！
解决方案
一行代码：设置请求头：
//HTTP访问控制（CORS）允许来自http://mataotao.com:8001的请求,并给予相应
response.setHeader('Access-Control-Allow-Origin','http://mataotao.com:8001')
else if (path === '/xxx') {
response.statusCode = 200
response.setHeader('Content-Type', 'text/xml;charset=utf-8')
//HTTP访问控制（CORS）允许来自http://mataotao.com:8001的请求,并给予相应
response.setHeader('Access-Control-Allow-Origin','http://mataotao.com:8001')
response.write(`
{
"note":{
"from":"mataotao",
"to":"ni",
}
}
`)
response.end()
}
然后重启：8002服务器，再次请求
成功
CORS可以告诉浏览器我们是一家人，不要阻止他
CORS的含义
突破同源策略===跨域
跨域资源共享
跨域（源、站）资源共享
总结
与 JSONP 相比，CORS 可以发送任意请求，而 JSONP 只能发送 get 请求。
response.setHeader('Access-Control-Allow-Origin',':8001')
这句话是跨域（突破同源策略）的核心，意思是其他网站（例如：8001)向我的跨域请求是允许的，响应是允许
阿贾克斯总结
什么是阿贾克斯？
