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端口,在进行测试的时候,我们一定要看清和我们服务器端口设置的端口是否一致,一旦不一致就会出现跨域问题。
相关文章
|
5月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
57 0
|
JSON 前端开发 数据库
AJAX ------ 同源策略
AJAX ------ 同源策略
|
JSON JavaScript 前端开发
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
265 0
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
|
JavaScript 前端开发 大数据
ajax请求总是不成功?浏览器的同源策略和跨域问题详解
XMLHttpRequest cannot load http://oldwang.com/isdad. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xiao
30557 0
N..
|
7月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
71 1
|
7月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
90 0
|
7月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
160 0
|
7月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
51 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
4月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
35 0