跨域

574 阅读1分钟

什么是同源?

什么是源?

  1. 通过window.origin或location.origin可以得到当前源
  2. 源=协议+域名+端口号

如何判断两个url是不是同源?

  • 通过对比两个url:协议,域名,端口号这3项要完全一致,他们就是同源

什么是跨域?

  • 浏览器规定,如果JS运行在源A里,那么就只能获取源A的数据,不能获取源B的数据,即不允许跨域
  • 跨域就是通过JSONP或者CORS方法,运行在源A的JS获取源B的数据

JSONP 跨域?

  • JSONP就是当前浏览器不支持CORS,我们必须使用另外一种方式来跨域,于是我们就请求一个js文件,这个js文件会执行一个回调,回调里面就有我们的数据
  • 让js文件包含数据让我们来引用
  • 比如fark.com要获取qq.com的数据
    1. qq.com写一个新的js文件YYY.js包换数据
    2. fark.com定义好window.xxx函数
    3. YYY.js就执行window.xxx函数
    4. fark.com就可以获取qq.com的数据

JSONP优点和缺点

  • JSONP优点
  • 最大优点:兼容IE和可以跨域
  • JSONP缺点
  • 因为他是script标签,他读不到AJAX那样精确的状态,没法知道状态码和响应的头是什么,他只有成功和失败两种状态
  • 因为他是script标签,他只能发GRT请求,不支持POST

CORS 跨域?

  • 跨域资源共享(CORS)是一种机制,它使用额外的HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。
  • 响应首部中可以携带一个 Access-Control-Allow-Origin 字段即可进行跨域
Access-Control-Allow-Origin: http://mozilla.com

上述代码意思是:允许来自http://mozilla.com的请求