乐趣区

什么是同源跨域什么是CORS什么是JSONP

什么是跨域?

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

同源又是什么呢?

所谓同源是指,域名,协议,端口均相同。
如:
http://www.abc.com/index.html 调用 http://www.abc.com/server.php(非跨域)

http://www.abc.com/index.html 调用 http://www.bcd.com/server.php(主域名不同:abc/bcd,跨域)

http://abc.123.com/index.html 调用 http://bcd.123.com/server.php(子域名不同:abc/bcd,跨域)

http://www.abc.com:8080/index.html 调用 http://www.abc.com:8081/server.php(端口不同:8080/8081,跨域)

http://www.abc.com/index.html 调用 https://www.abc.com/server.php(协议不同:http/https,跨域)

什么是 CORS?

查阅 mdn 关于 CORS 可知,跨域资源共享 (CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。

什么是 JSONP?

JSONP 就可以解决跨域问题。JSONP 是网页通过动态创建 <script> 元素向服务器发起请求,当服务器接收到请求后,将数据放在一个指定名字的回调函数里传回来。而正因此 <script> 只能 GET 不能 POST,JSONP 也只能 GET 不能 POST。

解决跨域问题

  1. JSONP
  2. 代理
    例如 www.abc.com/index.html 需要调用 www.bcd.com/server.php,可以写一个接口 www.abc.com/server.php,由这个接口在后端去调用 www.bcd.com/server.php 并拿到返回值,然后再返回给 index.html,这就是一个代理的模式。相当于绕过了浏览器端,自然就不存在跨域问题。
  3. PHP 端修改 header(XHR2 方式)

    在 php 接口脚本中加入以下两句即可:

    header('Access-Control-Allow-Origin:*');// 允许所有来源访问
    header('Access-Control-Allow-Method:POST,GET');// 允许访问的方式 
退出移动版