CORS跨域的一个细节问题

摘要: 跨域请求时，浏览器会判断当前发送的是“简单请求”还是“复杂请求”， 如果是复杂请求，浏览器会先发送一个option请求探测服务器是否允许跨域访问。

前端处理ajax跨域请求的方法大家基本都耳熟能详了，不过在实现的时候有些细节需要注意一下。比如让Web服务器在返回的响应头里增加CORS的方式：

Access-Control-Allow-Origin：*

之前遇到过一个项目是系统中有一个微服务使用c++提供，当时负责c++部分的同学就简单的做了一个响应http请求的接口，并在response的时候加上了上面的header。然后约定好url和参数，前端的同学直接拿出jquery开始ajax请求。
但是测试结果比较奇怪，请求无法成功获取到数据。查看网络报文发现ajax请求调用之后都会阻塞在一个option类型的请求，然后返回失败。 后来经过孜孜不倦的研(bai)究(du)，找到如下描述：

Simple requests

A simple cross-site request is one that meets all the following conditions:

The only allowed methods are:
GET
HEAD
POST
Apart from the headers set automatically by the user agent (e.g. Connection, User-Agent, etc.), the only headers which are allowed to be manually set are:
Accept
Accept-Language
Content-Language
Content-Type
The only allowed values for the Content-Type header are:
application/x-www-form-urlencoded
multipart/form-data
text/plain

简单的说，就是跨域请求时，浏览器会判断当前发送的是“简单请求”还是“复杂请求”， 如果是复杂请求，浏览器会先发送一个option请求探测服务器是否允许跨域访问。而底层web服务的实现根本没有考虑过这种情况，只处理了基本的post，get类型请求，也就是只能处理“简单请求”。
而前端ajax请求发送的代码是直接复用其他模块的。默认在request header里都是设置的"Content-Type:application/json"，与上面“简单请求”的条件对比可以发现这个header设置之后请求瞬间变得不简单了 ^0^。
那么解决方法就简单了，直接将请求参数改为"Content-Type:application/x-www-form-urlencoded"测试，即可正常返回。

转载请注明出处(http://www.qintianxiang.com/archives/254/)