如何获取跨域请求的自定义response headers

AngularJS XMLHttpRequest：$http用于读取远程服务器的数据

$http.post(url, data, [config]).success(function(){ ... })

$http.get(url, [config]).success(function(){ ... })

$http.get(url, [config]).success(function(){ ... })

一、$http.jsonp【实现跨域】

1. 指定callback和回调函数名，函数名为JSON_CALLBACK时，会调用success回调函数，JSON_CALLBACK必须全为大写。

2. 指定其它回调函数，但必须是定义在window下的全局函数。url中必须加上callback。

二、$http.get【实现跨域】

1. 在服务器端设置允许在其他域名下访问

response.setHeader("Access-Control-Allow-Origin", "*")//允许所有域名访问

response.setHeader("Access-Control-Allow-Origin", "")//允许www.123.com访问

2. AngularJS端使用$http.get()

三、$http.post【实现跨域】

1. 在服务器端设置允许在其他域名下访问，及响应类型、响应头设置

response.setHeader("Access-Control-Allow-Origin", "*")

response.setHeader("Access-Control-Allow-Methods","POST")

response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type")

2. AngularJS端使用$http.post()，同时设置请求头信息

$http.post('',{languageColumn:'name_eu'},{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data){

$scope.industries = data

})

在数据测试时基本都要涉及到跨域请求和提取header中的字段，网上有很多方法，但一定能成功，以下两段记录了本次网站前后端接口测试过程中两个主要的微小问题。

解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求，正确设置 JavaScript端需要设置的headers信息 方能实现。

此处手札 供后人参考~

1.第一步 服务端设置响应头

header('Access-Control-Allow-Origin:*') //支持全域名访问，不安全，部署后需要固定限制为客户端网址

header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE')//支持的http 动作

header('Access-Control-Allow-Headers:x-requested-with,content-type') //响应头 请按照自己需求添加。

2.第二部 了解IE chrome 等浏览器 对于 跨域请求并要求设置Headers自定义参数的时候的 "预请求" 就是如果遇到 跨域并设置headers的请求，所有请求需要两步完成！

A 第一步：发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可 不用返回任何内容信息。（能看到这份手稿的人，本人不相信你后台处理不了一个options请求）

B 第二步：服务器accepted 第一步请求后 浏览器自动执行第二步 发送真正的请求。此时 大多数人 会发现请求成功了，但是 有那么几个人会发现 请求成功了但是没有任何信息返回 why？因为你自定义的请求头在服务器响应中不存在！

查看console输出 会发现一个问题：

“Access-Control-Allow-Headers 列表中不存在请求标头 XXXXXX”【IE】，

request header field xxxxxx is not allowed by Access-Control-Allow-Header【chrome】

这是因为 你的XXXX请求头 没有在服务器端被允许哦~

遇到这个问题 只有通过修改服务器端来完成，举例：需要设置 requesttype这么一个自定义头，那么 你需要在 服务端里面 将header('Access-Control-Allow-Headers:x-requested-with,content-type，requesttype') 同学们自行体会吧 这种语法就是根据“,”分割 自己需要设置什么头，必须要在 服务端请求的响应头里面设置好，不然客户端永远永远提交不上去！

转自： http://www.cnblogs.com/cdemo/p/5158663.html

3）Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest

对象的getResponseHeader()

方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma

如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。

转自： http://www.ruanyifeng.com/blog/2016/04/cors.html

---