ajax——CORS跨域调用REST API 的常见问题以及前后端的设置
2016-06-12 18:15
766 查看
RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口。
但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下。
假设:前端域名为
现在,用Ajax向后端发送请求,得到第一个错误。(cors跨域的写法参考:http://blog.csdn.net/fdipzone/article/details/46390573)
提示响应头没有
再次发送请求,又报错。
意思是ajax头信息中有
好了,这下不报错了,但是仔细分析请求过程,发现浏览器向接口地址发送了两个请求,第一个是
这里的第一个请求叫做“Preflight Table Request(预检表请求,微软这么翻译的,不知道对不对)”。这个请求是在跨域的时候浏览器自行发起的,作用就是先请求一下看看服务器支不支持当前的访问。如果不支持,就会报之前所列的错误;如果支持,再发送正常的GET请求,返回相应的数据。
但是每个请求之前都要这么OPTIONS一下,作为典型处女座表示非常不能忍。需要告诉浏览器你搞一下是个意思,老这么搞就没意思了:
好了,事情至此告一段落。
才怪!
突然有一天测试妹子跑来跟你说网站记不住用户的状态,一检查发现跨域的时候cookie失效了。
总之就是要在xhr里设置一下
发送一个带cookie的post请求,依旧报错:
跟上边那个
再来,还是报错:
提示很明显,后端代码加一行,允许携带cookie访问:
参考:
预检表请求
Cross-Origin Resource Sharing
Angular通过CORS实现跨域方案 注意这里的[CORS的分类]一节。
但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下。
假设:前端域名为
front.ls-la.me,后端域名为
api.ls-la.com。前端需要访问的接口为
http://api.ls-la.com/user/info.json,需要用GET方式访问。
现在,用Ajax向后端发送请求,得到第一个错误。(cors跨域的写法参考:http://blog.csdn.net/fdipzone/article/details/46390573)
错误1:
XMLHttpRequest cannot load http://api.ls-la.com/user/info.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://api.ls-la.com' is therefore not allowed access.
提示响应头没有
Access-Control-Allow-Origin这一项,谷歌得知需要在服务器指定哪些域名可以访问后端接口,设定之:
header('Access-Control-Allow-Origin: http://front.ls-la.me'); // 如果你不怕扣工资可以这么设:header('Access-Control-Allow-Origin: *');
再次发送请求,又报错。
错误2:
XMLHttpRequest cannot load http://api.ls-la.com/user/info.json. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.
意思是ajax头信息中有
X-Requested-With这一字段,后端不允许。那就让允许吧:
header('Access-Control-Allow-Headers: X-Requested-With');
好了,这下不报错了,但是仔细分析请求过程,发现浏览器向接口地址发送了两个请求,第一个是
OPTIONS方式,第二个才是
GET方式。
这里的第一个请求叫做“Preflight Table Request(预检表请求,微软这么翻译的,不知道对不对)”。这个请求是在跨域的时候浏览器自行发起的,作用就是先请求一下看看服务器支不支持当前的访问。如果不支持,就会报之前所列的错误;如果支持,再发送正常的GET请求,返回相应的数据。
但是每个请求之前都要这么OPTIONS一下,作为典型处女座表示非常不能忍。需要告诉浏览器你搞一下是个意思,老这么搞就没意思了:
// 告诉浏览器我支持这些方法(后端不支持的方法可以从这里移除,当然你也可以在后边加上OPTIONS方法。。。) header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE'); // 告诉浏览器我已经记得你了,一天之内不要再发送OPTIONS请求了 header('Access-Control-Max-Age: ' . 3600 * 24);
好了,事情至此告一段落。
才怪!
突然有一天测试妹子跑来跟你说网站记不住用户的状态,一检查发现跨域的时候cookie失效了。
错误3:
js在发送跨域请求的时候请求头里默认是不带cookie的,需要让他带上:// js var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://api.ls-la.com/user/info.json'); xhr.withCredentials = true; xhr.onload = onLoadHandler; xhr.send(); // jQuery $.ajax({ url: 'http://api.ls-la.com/user/info.json', xhrFields: { withCredentials: true }, crossDomain: true, }); // Angular 三选一 $http.post(url, {withCredentials: true, ...}) $http({withCredentials: true, ...}).post(...) app.config(function ($httpProvider) { $httpProvider.defaults.withCredentials = true; }
总之就是要在xhr里设置一下
withCredentials = true,然后跨域请求就能带上cookie了。注意这里的cookie遵循同源策略,也就是后端发送的cookie也是属于域名
api.ls-la.com的。
发送一个带cookie的post请求,依旧报错:
错误4:
XMLHttpRequest cannot load http://api.ls-la.com/user/info.json. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
跟上边那个
X-Requested-With报错一样,头信息不允许,后端改下:
header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');
再来,还是报错:
错误5:
XMLHttpRequest cannot load http://api.ls-la.com/user/info.json. Response to preflight request doesn't pass access control check: Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://front.ls-la.me' is therefore not allowed access.
提示很明显,后端代码加一行,允许携带cookie访问:
// 允许前端带cookie访问 header('Access-Control-Allow-Credentials: true');
总结
在后端程序加载前执行以下函数,避免OPTIONS请求浪费系统资源和数据库资源。function cors_options() { header('Access-Control-Allow-Origin: http://front.ls-la.me'); header('Access-Control-Allow-Credentials: true'); if('OPTIONS' != $_SERVER['REQUEST_METHOD']) return; header('Access-Control-Allow-Headers: X-Requested-With, Content-Type'); header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE'); header('Access-Control-Max-Age: ' . 3600 * 24); exit; }
参考:
预检表请求
Cross-Origin Resource Sharing
Angular通过CORS实现跨域方案 注意这里的[CORS的分类]一节。
相关文章推荐
- android 清除所有activity
- 获取Android设备唯一标识码
- [Hadoop]Hadoop Training Roadmap
- 如何用R语言抽取出服从一般分布的样本
- EasyUi+Ajax实现二级联动
- ecshop调用指定分类的文章的方法介绍 集锦
- RedisHelper in C#
- struts action接收参数的三种方法
- postfix邮件的配置 和 收发问题处理
- win8下安装.net framework 3.5
- 将linux系统安装到U盘
- servlet相关技术
- 十招让 Ubuntu 16.04 LTS 用起来更得心应手
- Hibernate-原生SQL
- 线程和 进程(包括锁)
- 进度条15
- 表单增强与验证——复选框(选中All复选框)
- 为 ECShop 文章添加缩略图
- linux 字符设备
- LeetCode-169&229.Majority Element