ajax请求总是不成功?浏览器的同源策略和跨域问题详解-阿里云开发者社区

开发者社区> 木酱> 正文

ajax请求总是不成功?浏览器的同源策略和跨域问题详解

简介: XMLHttpRequest cannot load http://oldwang.com/isdad. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xiao
+关注继续查看

场景

码农小明要做一个展示业务数据的大屏给老板看,里面包含了来自自己网站的数据和来自隔壁老王的数据。
那么自己网站的数据提供了 http://xiaoming.com/whoami 这样的数据接口
隔壁老王提供了 http://oldwang.com/isdad 这样的数据接口
单独点开都是没有问题的。但是一使用 js 的 ajax 请求就无法收到来自 oldwang.com 的数据了。
点开浏览器控制台一看,红字标出(Chrome):

XMLHttpRequest cannot load http://oldwang.com/isdad. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xiaoming.com/' is therefore not allowed access.

这就是遇到了跨域问题

为什么会有这样的问题?

想象一下如果隔壁老王根本不认识你,他的网站自己有各种用户接口、订单接口、文章接口,那么谁都可以把这些接口返回的数据直接放在自己的网站上了,还是实时的。

所以浏览器制定了一个 同源策略 ,限制了从一个源(origin)中的脚本获取来自其他源(origin)中的资源。

什么是同源

如果两个页面拥有相同的协议(protocol: http),端口(port: 80),和主机(host: xiaoming.com),那么这两个页面就属于同一个源(origin)。

解决方案

这里就不讲多年前的iframe、flash等方式了,只讲几个最常用到的方案

A.x.com 和 B.x.com 间的跨域

子域名不同也是会受到跨域限制的。这种问题最简单,只需要将页面声明为更高级的域就可以了。

<script>
  document.domain = "x.com";
</script>

最经典、高效、浏览器兼容最好的解决方案:JSONP

但是有一个致命的缺点:非常高的跨站脚本攻击风险,所以 DataV 是不支持这种方式的

看到JSONP这个名字很多人以为这是和JSON密切相关的一种用来跨域的黑科技,但实际上从跨域的视角看,跟JSON并没有一毛钱关系,他是利用了浏览器允许跨域加载 js 等资源来获取数据。

因为浏览器支持跨域加载 js 如 <script src="http://aliyun.com/....."></script> ,所以很简单,可以把数据包装成 js 就可以了。

这是数据,通过 script 加载到数据无法“执行”,更无法传给 ajax 的回调函数:

{
  "data": 123
}

这是js脚本,只要将 callback 与 ajax 的回调函数做关联,就可以讲数据传给回调函数:

callback({
  "data": 123
})

这可以看到四点:

一、需要 callback 与 ajax 回调函数绑定;
二、需要数据服务器 配合 的。
三、只支持GET请求
四、数据服务器可以随意插入危险的脚本

前端如果用 jquery,jquery已经完成了整个取值过程的封装,逻辑是:

  1. 随机生成不重复的 callback 函数名,并与 ajax 回调函数 绑定。
  2. 将 callback 函数名放入 URL 的 query string 中,如 http://oldwang.com/api?callback= jQuery214015557975923291245_1460532274390
  3. 生成一个 <script> 标签,将上述 URL 作为 src
  4. 等待数据加载,并把数据传入 ajax 的回调函数

后端以 php 为例,逻辑是获取浏览器传来一个参数作为callback包装数据:

<?php
  echo $_GET['callback']."(". $data .")";
?>

大部分新浏览器都兼容的 CORS(Cross Origin Resource Sharing)

他的原理是隔壁老王主动告诉浏览器“别拦着小明,我们是亲戚……”
所以最简单的例子,就是在数据服务器返回的头信息中包含:

Access-Control-Allow-Origin: http://xiaming.com

然而这个头信息并不支持枚举,那如果隔壁老王的亲戚太多就只能通过程序来动态得生成这个头信息了,以PHP为例:

<?php 
if (is_my_bastard($_SERVER['HTTP_ORIGIN'])) {
 header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
}
?>

如果老王作为一个好人,来者不拒。那么可以直接使用 *

Access-Control-Allow-Origin: *

Cookies

CORS默认是不带 cookie 信息的,如果要带上 cookie 需要添加 withCredentials 参数,以 jquery 为例:

$.ajax({
    url: "http://laowang.com/isdad",
    xhrFields: {
      withCredentials: true
    }
  });

而服务器还需要加上允许 Credentials 的头信息以及不允许用通配符“*”,如下面的代码

<?php 
if (is_my_bastard($_SERVER['HTTP_ORIGIN'])) {
  header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); // 不允许用 *
  header("Access-Control-Allow-Credentials:true");
}
?>

这就是隔壁老王的故事

其他参数可以参阅:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Socket.IO + Express实现的跨浏览器、子域的聊天室
实例中用到了(实例在Windows XP下运行):Node.js、Socket.IO、Express.js、jade、stylus   先在hosts文件中添加两行规则,关于两个子域的:sub1.
884 0
Ajax实现跨域访问的三种方法
一、什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js       http:// (协议号)                www  (子域名)              google (主域名)                8080 (端口号) script/jquery.js (请求的地址) * 当协议、子域名、主域名、端口号中任意一各不相同时,都算不同的“域”。
840 0
深入浅出JSONP--解决ajax跨域问题
取不到数据!   上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中取得的。
846 0
IE浏览器下ajax缓存导致数据不更新的解决方法
摘自:http://www.iefans.net/ie-ajax-json-shuju-huancun/ 最近做设计的时候遇到一个小问题,当你用jquery的getjson函数从后台获取数据的时候,IE浏览器会自动设置缓存,如果此时你对数据进行修改的时候刷新页面,IE并不会在页面显示你修改后的数据,因为你刷新的时候IE浏览器会查找缓存并显示你修改前的数据,最后在网上查了些资料终于解决了IE浏览器下的问题。
1031 0
SpringBoot-12-之Ajax跨域访问全解析
一.什么是跨域呢? 1.引入: 先讲个故事:从前一个叫8080的大佬和一个8081的大佬各占一方天地,还有一个叫浏览器的大佬和8080还有8081关系都不错。
1176 0
ajax 跨域----好用的解决方案
一、前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下。个人见识有限,如有差错,请多多见谅 二、前言 关于跨域,有N种类型,本文只专注于 ajax请求跨域(ajax跨域只是属于浏览器"同源...
1610 0
+关注
7
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载