Express学习笔记(四)——同源和跨域详解

目录

1. 了解同源策略和跨域

1.1 同源策略

1.1.1 什么是同源

1.1.2 什么是同源策略

1.2 跨域

1.2.1 什么是跨域

1.2.2 浏览器对跨域请求的拦截

1.2.3 如何实现跨域数据请求

2. JSONP

2.1 什么是JSONP

2.2 JSONP的实现原理

2.3 自己实现一个简单的JSONP

2.4 JSONP的缺点

2.5 jQuery中的JSONP

2.6 自定义参数及回调函数名称

2.7 jQuery中JSONP的实现过程


1. 了解同源策略和跨域

1.1 同源策略

1.1.1 什么是同源

如果两个页面的协议域名端口都相同,则两个页面具有相同的源

例如,下表给出了相对于 http://www.test.com/index.html 页面的同源检测:

Express学习笔记(四)——同源和跨域详解_第1张图片

1.1.2 什么是同源策略

同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能。

MDN 官方给定的概念:

  • 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

通俗的理解:

  • 浏览器规定,A 网站的 JavaScript,不允许和非同源的网站 C 之间,进行资源的交互,例如:
    • 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
    • 无法接触非同源网页的 DOM
    • 无法向非同源地址发送 Ajax 请求

1.2 跨域

1.2.1 什么是跨域

同源指的是两个 URL 的协议、域名、端口一致,反之,则是跨域

出现跨域的根本原因:

  • 浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

网页:

  • http://www.test.com/index.html

接口:

  • http://www.api.com/userlist

1.2.2 浏览器对跨域请求的拦截

Express学习笔记(四)——同源和跨域详解_第2张图片

注意:

  • 浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!

1.2.3 如何实现跨域数据请求

现如今,实现跨域数据请求,最主要的两种解决方案,分别是 JSONPCORS

JSONP:

  • 出现的早,兼容性好(兼容低版本IE)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持 GET 请求,不支持 POST 请求。

CORS:

  • 出现的较晚,它是 W3C 标准,属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。

2. JSONP

2.1 什么是JSONP

JSONP (JSON with Padding) 是 JSON 的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

2.2 JSONP的实现原理

由于浏览器同源策略的限制,网页中无法通过 Ajax 请求非同源的接口数据。但是

剖析 jsonp实现原理2:

  • 新建一个 getData.js 的脚本文件,将 success 函数的调用抽离到这个脚本文件中。
success({ name: 'zs', age: 20 })
  • 在一个 html 页面的 script 脚本中引入这个 js 脚本。假设这个 js 脚本放到服务器上,为了调用这个函数,通过查询字符串的方式,告诉服务器,调用的是哪一个函数。
  • JSONP 的实现原理,就是通过

    总结 jsonp 实现的过程:

    • 第一步,定义一个 function 回调函数。
    • 第二步,通过 script 标签的 src 属性请求一个接口,接口返回一个函数的调用。通过查询字符串的形式告诉服务器,返回哪一个函数的调用。(callback=success)
    • 服务器根据传过去的函数名字,返回一个函数的调用。调用函数期间,传了什么样的数据,最终通过 data 拿到。data 其实就是通过 jsonp 请求回来的数据。

    2.3 自己实现一个简单的JSONP

    定义一个 success 回调函数:

    
    

    通过

你可能感兴趣的:(express,学习,笔记)