同源策略:只有协议+端口+域名一模一样才允许发AJAX

　　

同源策略:只有协议+端口+域名一模一样才允许发AJAX

　　同源策略和CORS跨域

　　PS：这个文章遵循的是JSONP的原理和写法，部分内容是前两个文章的继承。

　　这个文章只是我个人的学习笔记。内容没有仔细排版，格式也没有仔细校对。一些错误请见谅。

　　使用表单、a、img、链接、脚本。跨域发送请求

　　但是！

　　同源策略：只允许相同的协议+端口+域名发送AJAX请求。

　　例如，我们向 Ajax 发送请求

　　

　　

　　请求成功，但是报错

　　

　　加载失败，

　　因此，请求已发送，但未收到响应！

　　同源政策

　　AJAX请求只有在协议+端口+域名完全一致的情况下才允许。

　　完全一样完全一样完全一样完全一样完全一样完全一样完全一样完全一样

　　我可以向 no 发送 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)跨域向我发送请求并允许响应

　　Ajax 摘要

　　什么是 Ajax？