Ajax-18:同源策略

简介: Ajax-18:同源策略

什么是同源策略?

同源策略是浏览器的一种安全策略。同源指的是协议、域名、端口号必须完全相同,违背同源策略就是跨域

同源下访问URL可以简写

const btn = document.querySelector('button');
btn.onclick = function() {
    const xhr = new XMLHttpRequest();
    // 因为满足同源策略,所以url路径可以简写
    xhr.open('GET','/data');
    xhr.send();
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
            if(xhr.status >= 200 && xhr.status < 300) {
                console.log(xhr.response);
            }
        }
    }            
}

注意事项

  • 通过VScode右键打开的网页是5500端口,在进行测试的时候,我们一定要看清和我们服务器端口设置的端口是否一致,一旦不一致就会出现跨域问题。
相关文章
|
4月前
|
XML 前端开发 JavaScript
什么是ajax,为什么使用ajax?
什么是ajax,为什么使用ajax?
19 0
|
6月前
Ajax-jsonp跨域
Ajax-jsonp跨域
|
8月前
|
缓存 JSON 前端开发
Ajax:跨域与JSONP
Ajax:跨域与JSONP
42 1
|
12月前
|
前端开发 安全 JavaScript
聊聊同源策略限制AJAX请求
浏览器的同源策略及相关的AJAX跨域解决方案相信各位前端🐒们已经烂熟于心了,最近我脑子里突然冒出一些问题,就是标题中为什么同源策略要限制AJAX请求 接下来我们来讨论下这些问题,可能某些问题对于你来说很荒谬,但希望能对你带来一些奇怪的感觉,接下来就是我的一个思考过程+资料查阅+相关解释 这篇博客算是一个提问吧,非该领域的人,有些问题检索起来不知如何提问,所以这里写了一篇文章
97 0
|
JSON 缓存 前端开发
|
JSON 前端开发 JavaScript
Ajax 跨域
Ajax 跨域
139 0
Ajax 跨域
|
JSON JavaScript 前端开发
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
224 0
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
|
前端开发
ajax 跨域解决
function _do_edit(id) { $.confirm({ boxWidth: '900px', title: '商品编辑', content: '', buttons...
874 0
|
Web App开发 XML JavaScript