Http跨域时候预检没通过的几种原因

网上大多数涉及的原因(直接复制粘帖):

CORS把HTTP请求分成两类，不同类别按不同的策略进行跨域资源共享协商。

1. 简单跨域请求。
当HTTP请求出现以下两种情况时，浏览器认为是简单跨域请求：

1). 请求方法是GET、HEAD或者POST，并且当请求方法是POST时，Content-Type必须是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一个值。
2). 请求中没有自定义HTTP头部。

对于简单跨域请求，浏览器要做的就是在HTTP请求中添加Origin Header，将JavaScript脚本所在域填充进去，向其他域的服务器请求资源。服务器端收到一个简单跨域请求后，根据资源权限配置，在响应头中添加Access-Control-Allow-Origin
Header。浏览器收到响应后，查看Access-Control-Allow-Origin Header，如果当前域已经得到授权，则将结果返回给JavaScript。否则浏览器忽略此次响应。

2. 带预检(Preflighted)的跨域请求。
当HTTP请求出现以下两种情况时，浏览器认为是带预检(Preflighted)的跨域请求：

1). 除GET、HEAD和POST(only with application/x-www-form-urlencoded, multipart/form-data, text/plain Content-Type)以外的其他HTTP方法。
2). 请求中出现自定义HTTP头部。

带预检(Preflighted)的跨域请求需要浏览器在发送真实HTTP请求之前先发送一个OPTIONS的预检请求，检测服务器端是否支持真实请求进行跨域资源访问，真实请求的信息在OPTIONS请求中通过Access-Control-Request-Method
Header和Access-Control-Request-Headers
Header描述，此外与简单跨域请求一样，浏览器也会添加Origin
Header。服务器端接到预检请求后，根据资源权限配置，在响应头中放入Access-Control-Allow-Origin
Header、Access-Control-Allow-Methods和Access-Control-Allow-Headers
Header，分别表示允许跨域资源请求的域、请求方法和请求头。此外，服务器端还可以加入Access-Control-Max-Age
Header，允许浏览器在指定时间内，无需再发送预检请求进行协商，直接用本次协商结果即可。浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。这个过程对真实请求的调用者来说是透明的。

XMLHttpRequest支持通过withCredentials属性实现在跨域请求携带身份信息(Credential，例如Cookie或者HTTP认证信息)。浏览器将携带Cookie
Header的请求发送到服务器端后，如果服务器没有响应Access-Control-Allow-Credentials
Header，那么浏览器会忽略掉这次响应。

这里讨论的HTTP请求是指由Ajax XMLHttpRequest对象发起的，所有的CORS HTTP请求头都可由浏览器填充，无需在XMLHttpRequest对象中设置。以下是CORS协议规定的HTTP头，用来进行浏览器发起跨域资源请求时进行协商：
1. Origin。HTTP请求头，任何涉及CORS的请求都必需携带。
2. Access-Control-Request-Method。HTTP请求头，在带预检(Preflighted)的跨域请求中用来表示真实请求的方法。
3. Access-Control-Request-Headers。HTTP请求头，在带预检(Preflighted)的跨域请求中用来表示真实请求的自定义Header列表。
4.
Access-Control-Allow-Origin。HTTP响应头，指定服务器端允许进行跨域资源访问的来源域。可以用通配符*表示允许任何域的JavaScript访问资源，但是在响应一个携带身份信息(Credential)的HTTP请求时，Access-Control-Allow-Origin必需指定具体的域，不能用通配符。
5. Access-Control-Allow-Methods。HTTP响应头，指定服务器允许进行跨域资源访问的请求方法列表，一般用在响应预检请求上。
6. Access-Control-Allow-Headers。HTTP响应头，指定服务器允许进行跨域资源访问的请求头列表，一般用在响应预检请求上。
7. Access-Control-Max-Age。HTTP响应头，用在响应预检请求上，表示本次预检响应的有效时间。在此时间内，浏览器都可以根据此次协商结果决定是否有必要直接发送真实请求，而无需再次发送预检请求。

8. Access-Control-Allow-Credentials。HTTP响应头，凡是浏览器请求中携带了身份信息，而响应头中没有返回Access-Control-Allow-Credentials: true的，浏览器都会忽略此次响应。

容易忽略的地方(也是在网上找了大半天都没找到问题的原因):

本人问题突破口(xhr响应报错:syntax error 响应语法错误)

首先我的跨域不是简单跨域,需要发送预检请求,然后怎么按照网上的配置始终预检通不过,开始怀疑是不是option请求设置问题,然后找找找

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS   看完这个之后发现option请求应该问题不打,然后看请求的响应发现报了错,这个时候发现问题可能出在服务器端仔细研究发现后台没有针对option请求的正确响应,找到问题就好解决了,以下是配置OPTIONS请求相应的一个简单示例(Nodejs),应根据自己响应情况做具体修改

app.all('/*',function(req,res,next){
  if(req.method === 'OPTIONS'){
     res.status(200).end();
  }else{
     next();
  }
 });