同源策略

  • 同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同
  • 在同源策略下，只有同源的地址才可以相互通过 AJAX 的方式请求
  • 同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求


    同源

    http://www.example.com/detail.html 与以下地址对比
对比地址 是否同源 原因
http://api.example.com/detail.html 不同源 域名不同
https://www.example.com/detail.html 不同源 协议不同
http://www.example.com:8080/detail.html 不同源 端口不同
http://api.example.com:8080/detail.html 不同源 域名、端口不同
https://api.example.com/detail.html 不同源 协议、域名不同
https://www.example.com:8080/detail.html 不同源 端口、协议不同
http://www.example.com/other.html 同源 只是目录不同

在同源策略下，浏览器不允许 Ajax 跨域获取服务器数据

跨域

JSONP

原理

  • JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧
  • 原理就是在客户端借助 script 标签请求服务端的一个地址
  • 地址返回一段带有某个全局函数调用的 JavaScript 脚本
  • 在调用函数中，原本需要返回给客户端的数据通过参数传递给这个函数

  • 这样客户端的函数中就可以通过参数得到原本服务端想要返回的数据


    CORS

    Cross Origin Resource Share，跨域资源共享
    这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时 候添加一个 Access-Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求
    Access-Control-Allow-Origin 的值：

  • 表示允许任意源访问，不安全
    http://foo.com 允许指定的源访问