同源策略(Same-Origin Policy),是浏览器的一种安全策略
-
同源(即url相同):协议、域名、端口号 必须完全相同。(请求是来自同一个服务)
-
跨域:违背了同源策略,即跨域。
-
ajax请求是遵循同源策略的。
-
同源请求例子(在浏览器访问127.0.0.1:9000/server-orign,然后点击按钮发送同源请求):
-
服务端对同源请求处理:
//3、创建路由规则(request 是请求的报文,response是响应的报文)
app.get('/server-orign', (request, response) => {
//响应一个页面
response.sendFile(__dirname + '/同源策略.html');
});
app.get('/data', (request, response) => {
//响应数据
response.send('服务端返回的数据');
});
- 客户端html:
const btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
//console.log('测试');
//发送ajax请求
const xhr = new XMLHttpRequest();
xhr.open('GET', '/data');//同源请求,路径可以简写
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
console.log(xhr.response);
}
}
}
}
- 同源策略的目的
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。文章来源:https://www.toymoban.com/news/detail-609382.html
- 同源策略的限制范围
- 随着互联网的发展,“同源策略”越来越严格,目前,如果非同源,以下三种行为都将收到限制。
// 1. Cookie、LocalStorage 无法读取。不能共享cookie。
// 2. DOM 无法获得,不能互相操作dom
// 3. AJAX 请求不能发送。
虽然这些限制是很有必要的,但是也给我们日常开发带来不好的影响。比如实际开发过程中,往往都会把服务器端架设到一台甚至是一个集群的服务器中,把客户端页面放到另外一个单独的服务器,那么这时候就会出现不同源的情况,如果我们知道两个网站都是安全的话,我们是希望两个不同源的网站之间可以相互请求数据的。
• 这就需要使用到跨域。文章来源地址https://www.toymoban.com/news/detail-609382.html
解决跨域(JSONP、CORS)
- JSONP
- CORS
- WebSocket
到了这里,关于【Ajax】笔记-同源策略的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!