万普插件库

jQuery插件大全与特效教程

前端:何为跨域,如何跨域(前端做跨域)

关键词

同源策略浏览器设计的一个功能限制CORS突破同源策略的一个方法JSONPIE时代的补救办法

同源策略

(一)同源的定义

  • 源:源 = 协议+域名+端口
  • 获取源的方法:window.origin
  • 如果两个url的 协议名、域名、端口号 完全一致,则称他们同源。

举例:https://qq.com 和 https://www.baidu.com 不同源https://baidu.com 和 https://www.baidu.com 也不同源(二)同源策略定义

  1. 浏览器规定
    如果JS运行在源A中,那么就只能获得源A中的数据,不能获得源B中的数据,即不允许“跨域”
  2. 举例:假设 https://oliver.com/index.html 引用了https://cdn.com/jQuery.js那么就说jQuery.js是运行在源 https://oliver.com 里所以jQuery.js只能获得 https://oliver.com 中的数据,而不能获取源 https://cdn.com 中的数据

(三)关键问题

  • 浏览器无法区分请求的发送者

(四)同源策略的目的

  • 为了保护用户隐私,防止用户个人数据被钓鱼网站偷走。

跨域的实现

解决方案一:CORS

  1. 问题根源
    浏览器默认不同源之间不能相互访问数据
    但假设有两个不同源的网站都属于我,我就是想要他们相互访问,那么我可以用CORS方法。
  2. 使用方法:提前声明。
    在源A中增加响应头Access-Control-Allow-Origin: http://xxx.xxx
    这样就可以允许源 http://xxx.xxx 访问源A的数据了
  3. 详细用法:去MDN瞅瞅

解决方案二:JSONP

  1. 问题根源
    IE不支持CORS啊!!!
  2. 定义
    利用script标签没有跨域限制来使用js包裹数据,达成和第三方数据通信的一种跨域解决方案。
  3. 步骤假设oliver.com想要访问db.com里的数据 db.com中的数据写到/data.js里 oliver.com用