AJax技术

Access-Control-Allow-Origin与Ajax跨域解决方法

字号+ 作者:H5之家 来源:H5之家 2017-12-12 18:00 我要评论( )

Access-Control-Allow-Origin与Ajax跨域解决方法

今天与萌萌一起修bug,遇到一个跨域的问题。我们两个都对它有一些不太清楚,一起搞清楚后记录下来。

问题

在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题。另一个域名必须在response中添加Access-Control-Allow-Origin的header,才能让前者成功拿到数据。

这句话对吗?如果对,那么流程是什么样的?

跨域

怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域。

 

当跨域访问时,浏览器会发请求吗

这是真正困扰我们的问题,因为我们不清楚浏览器会怎么做。它会不会检查到你要请求的地址不是同一个域的,直接就禁止了呢?

我在jsbin上做了一个试验,使用chrome_6494_1.html' target='_blank'>Chrome打开。当点击“Run with Js”时,控制台上会打出:

XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.jsbin.io' is therefore not allowed access. 

但开发者工具的”Network”栏并没有任何记录。它到底发请求了没?

我又使用python -m SimpleHTTPServer在本地创建了一个小服务器,然后把地址改成它,结果发现在python这边的确打印出请求来了,可见浏览器的确发出了请求。

Access-Control-Allow-Origin

现在该Access-Control-Allow-Origin出场了。只有当目标页面的response中,包含了Access-Control-Allow-Origin这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。如:

Access-Control-Allow-Origin:

如果它的值设为*,则表示谁都可以用:

Access-Control-Allow-Origin: *

没错,在产品环境中,没人会用*


标签: ajax

顶一下

(0)

0%

踩一下

(0)

0%

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • PHP ajax 分页类代码

    PHP ajax 分页类代码

    2017-12-12 18:14

  • 从零开始学习jQuery (六) AJAX快餐(10)

    从零开始学习jQuery (六) AJAX快餐(10)

    2017-12-12 09:22

  • 如何实现bootstrap jquery dataTable异步ajax刷新表格数据

    如何实现bootstrap jquery dataTable异步ajax刷新表格数据

    2017-12-12 08:00

  • AJAX AJAX教程 AJAX实例(4)

    AJAX AJAX教程 AJAX实例(4)

    2017-12-11 15:17

网友点评
t