学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)

简介: 学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)

一、同源策略(Same-Origin Policy),是浏览器的一种安全策略.

1、同源(即url相同):协议、域名、端口号 必须完全相同。(请求是来自同一个服务)

2、跨域:违背了同源策略,即跨域。

3、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);
               }
           }
        }
    }


4、同源策略的目的

同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

5、同源策略的限制范围

  • 随着互联网的发展,“同源策略”越来越严格,目前,如果非同源,以下三种行为都将收到限制。

// 1. Cookie、LocalStorage 无法读取。不能共享cookie。

// 2. DOM 无法获得,不能互相操作dom

// 3. AJAX 请求不能发送。


■ 虽然这些限制是很有必要的,但是也给我们日常开发带来不好的影响。比如实际开发过程中,往往都会把服务器端架设到一台甚至是一个集群的服务器中,把客户端页面放到另外一个单独的服务器,那么这时候就会出现不同源的情况,如果我们知道两个网站都是安全的话,我们是希望两个不同源的网站之间可以相互请求数据的。

  • 这就需要使用到跨域。


二、解决跨域(JSONP、CORS)

1、非官方解决途径JSONP:

(1) JSONP 是什么?

JSONP(JSON with Padding),是一个非官方的跨域解决方案,只支持 get 请求

(2) JSONP 怎么工作的?

在网页有一些标签天生具有跨域能力,比如:img link iframe script。 JSONP 就是利用 script 标签

利用script的路径src作为请求路径,然后只需要服务端返回的数据封装成js代码即可

■ jsonp例子1:

  • 服务端处理,响应返回js代码(跟咱平时引入外部的js代码一样啦):
app.get('/jsonp', (request, response) => {
    //响应数据
    response.send('console.log("hello jsonp")');
});
  • 客户端处理:
<script src="http://127.0.0.1:9000/jsonp"></script>


■ jsonp例子2(验证用户名,显示密码):

  • 服务端处理:
//服务端验证用户名
app.all('/check', (request, response) => {
    //响应数据
    // response.send('console.log("hello jsonp")');
    const data = {
        name:'admin',
        password:'123456'
    };
    let str = JSON.stringify(data);
    response.end(`handle(${str})`);//调用客户端(前端)的handle方法
});
  • 客户端处理:
用户名: <input type="text" name="name"/>
  <p></p>
  <script>
    const input = document.getElementsByTagName('input')[0];
    const p = document.querySelector('p');
    //声明一个handle函数,用来给服务端调用,以处理服务端返回的数据
    function handle(data) {
        input.style.border = "solid 1px #f00";
        let username = input.value;
        //若用户名正确,将服务端返回的数据显示到p标签内
        if(username === data.name){
            p.innerHTML = data.password;
        }
    }
    input.onblur = function () {
        //向服务端发送请求(jsonp),检查用户是否存在
        const script = document.createElement('script');
        //设置script标签的src为ajax的url
        script.src = 'http://127.0.0.1:9000/check';
        //在界面生成dom元素
        document.body.appendChild(script);
    }
</script>


7.png


❀ jsop跨域访问第三方接口,请求成功,但是却拿不到数据?

从上面的例子可以看到当服务端是第三方(例如访问百度的快递接口:https://express.baidu.com/express/api/express),

通过jsonp跨域方式去访问第三方接口,结果:请求成功,状态码是200,但是无法拿到响应的数据.


  • 原因1:第三方服务在创建路由规则时,设置不允许跨域访问,所以提示CORB,无法直接拿到数据;
  • 原因2:想通过script标签的 src='请求url' 引入服务端响应回来的js代码,但是且不知道第三方服务端响应时是怎么书写的,不知道回调了什么函数
  • 总结:jsonp 解决跨域访问,除了类型是GET,还需要服务器的配合才能完成跨域


□ 咱自己的服务端没设置允许跨域访问,默认为不允许跨域访问

□ 但是咱在服务端设置请求时响应回去一些js代码(handle函数的调用(data的json对象作为参数)的js代码

□ 在客户端咱通过 src='请求url' 引入服务端响应回来的js代码,而咱知道咱服务端响应回来一个handle函数的调用,所以咱在客户端定义了一个handle回调函数(handle函数的参数是响应回来的json格式的数据)。



2、官方解决途径CORS:

(1)CORS: Cross-Origin Resource Sharing 跨域资源共享, 即服务端设置响应头是允许跨域的

(2)CORS的更多介绍:跨源资源共享(CORS) - HTTP | MDN (mozilla.org)

  • 服务端cors跨域请求处理:
app.all('/cors', (request, response) => {
    //设置响应头(允许跨域)
    response.setHeader('Access-Control-Allow-Origin', '*');
    // response.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:9000);
    //设置响应头(允许自定义请求头)
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应头(允许自定义请求方式)
    response.setHeader('Access-Control-Allow-Method', '*');
    //设置响应体
    response.send('hello cors');
});
  • 客户端处理:
<button>点击发送ajax请求</button>
<script>
    const btn = document.getElementsByTagName('button')[0];
    btn.onclick = function () {
        const xhr = new XMLHttpRequest();
        xhr.open('get', 'http://127.0.0.1:9000/cors');
        xhr.send();
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status < 300){
                    console.log(xhr.response);
                }
            }
        }
    }
</script>
目录
相关文章
|
8天前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
15 0
|
13天前
|
前端开发 JavaScript 安全
详尽分享突破ajax不能跨域的限制
详尽分享突破ajax不能跨域的限制
|
17天前
|
安全 前端开发 JavaScript
CORS是W3C标准,解决浏览器同源策略限制的跨域数据访问。
【6月更文挑战第27天】CORS是W3C标准,解决浏览器同源策略限制的跨域数据访问。它通过服务器在HTTP响应头添加`Access-Control-Allow-*`字段允许特定源请求。简单请求无需预检,非简单请求会发OPTIONS预检请求。服务器配置CORS策略,客户端正常请求,浏览器自动处理。若未正确配置,浏览器将阻止响应,保障安全。
16 0
|
2月前
|
移动开发 前端开发 安全
Ajax跨域的所有方法(最详细带使用教程!!!)
Ajax跨域的所有方法(最详细带使用教程!!!)
|
2月前
|
JSON 前端开发 安全
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
57 0
|
8月前
Ajax-jsonp跨域
Ajax-jsonp跨域
|
24天前
|
前端开发 安全 JavaScript
Spring Boot2 系列教程(十四)CORS 解决跨域问题
Spring Boot2 系列教程(十四)CORS 解决跨域问题
|
2月前
|
存储 安全 前端开发
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
|
2月前
|
移动开发 JSON 前端开发
跨域资源共享(CORS):详解跨域请求的限制与解决方法
跨域资源共享(CORS):详解跨域请求的限制与解决方法
|
6天前
|
缓存 前端开发 Java
在Java项目中实现跨域资源共享(CORS)
在Java项目中实现跨域资源共享(CORS)