AngularJS跨域请求

本文主要针对网上各种跨域请求的总结，并加入自己的验证判断，实现工作中遇到的跨域问题。所涉及到的领域很小，仅仅局限于：AngularJS CORS post 并同时需要实现json数据传送给服务器。

首先，（博文是互相转载，也没有看出原作者和原网站，我摘写其中一段：）$http.post实现跨域：

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

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

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

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

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

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

//…

});

当然，在我的项目中需要传递的是json格式的数据，所以需要在客户端的content-type中设置如下（如果服务器端没有设置："Access-Control-Allow-Headers","x-requested-with,content-type"，下面的设置浏览器会报错）：

'Content-Type':'application/json'

CORS分简单请求和复杂请求

并不是所有的跨域请求都会发送OPTIONS请求，按照这个区别，CORS分为简单请求和复杂请求，简单请求不发送OPTIONS。

HTTP的header通常包含下面这些内容：

"Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type的值仅是下列之一：

application/x-www-form-urlencoded

multipart/form-data

text/plain

HTTP方法是HEAD GET POST之一，同时HTTP的header包含如上面所示，任何一个不满足这两种要求的请求，都是复杂请求，比如发送put，delete等http动作，或者Content-Type:application/json的内容。

只有复杂请求包含"预检"这一动作，另外Access-Control-Max-Age应该也会影响OPTIONS请求的发送。

另外，在《AngularJS权威指南》一书中有关跨域与同源策略问题，也有专门的讲述，这里是总结概要：

浏览器在全局层面禁止了页面加载或执行与自身来源不同的域的任何脚本。

同源策略允许页面从同一个站点加载和执行特定的脚本。浏览器会比较每一个资源的协议、主机名和端口号来判断资源是否与页面同源。站外其它来源的脚本同页面的交互则被严格限制。

跨域资源共享（Cross Origin Resource Sharing，CORS）是一个解决跨域问题的好方法，从而可以使用XHR从不同的源加载数据和资源。跨域是很久之前就有的需求，但是CORS这种方法却比较新，以前使用的是JSONP除此以外，还有一种叫做服务器代理的方法，我比较中意CORS，它不好的地方应该很少，比如，在古老的浏览器（IE8以及之前）中没有得到支持。但是对于移动端开发来说，这个可以不用考虑。

CORS实现方法在上面已经写到，并且就是基于AngularJS实现，所以这里就不再重复，但是，关于CORS分类中的非简单请求，《AngularJS权威指南》这本书有一些介绍，应该会对开发工作有所启发。

如果想要支持PUT或DELETE方法，又或者想给请求设置特殊的内容类型，就需要发送非简单请求。对于非简单请求，浏览器采用了不同的处理方式，发送两个请求：预请求和请求。

预请求是想服务器请求许可，有了服务器的许可才可以获取服务器的数据，也就是执行真正的请求。

浏览器发送的预请求是OPTIONS类型的，预请求中包含以下头信息：

Access-Control-Request-Method

Access-Control-Request-Headers    这个header的值是可选的，可以是以逗号分隔的非简单头列表。

服务器必须接受这个请求，然后检查HTTP方法和头的合法性。如果通过了检查，服务器会在响应（response）中添加下面这些头参数：

Access-Control-Allow-Origin    这个头的值必须和请求来源相同，或者是*代表允许任何来源的请求

Access-Control-Allow-Methods 设置HTTP方法的列表，列表中的项浏览器端才可以使用。

Access-Control-Allow-Headers 如果浏览器端请求设置了Access-Control-Request-Headers头，服务器端必须在响应中添加同一个头参数。

我们希望服务器在可以接受这个请求时返回200状态码，如果服务器返回来200状态码，真正的请求才会发出。

tips：CORS并不是安全机制，只是现代浏览器实现的一个标准。应用的安全策略还需要在项目全局的角度考虑与控制。