Quantcast
Channel: PayMoon贝明实验室
Viewing all articles
Browse latest Browse all 130

跨域问题的解决办法Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

$
0
0
之前写过一篇,在tomcat里面解决跨域的办法,http://www.paymoon.com:8001/index.php/2016/05/30/java-web-support-cors-visit/   最近在做spring security 的权限问题,做好打了个jar包,供各服务使用,在调用相关login方法的时候,没有通过springMVC的返回,而是自己写了response,这就导致无法通过tomcat的方式解决,必须手动解决。 说到手动解决,先说结果: [crayon-583580f1a3e58641090681/] 即在response头里面加上各种头信息即可。那么这些头信息是什么意思呢? 即相关原理如下: 本文:http://www.paymoon.com:8001/index.php/2016/11/23/request-header-field-content-type-is-not-allowed-by-access-control-allow-headers-in-preflight-response/

HTTP响应头

这部分里列出了跨域资源共享(Cross-Origin Resource Sharing)时,服务器端需要返回的响应头信息.上一部分内容是这部分内容在实际运用中的一个概述.

Access-Control-Allow-Origin

返回的资源需要有一个 Access-Control-Allow-Origin 头信息,语法如下: [crayon-583580f1a3e67652606354/] origin参数指定一个允许向该服务器提交请求的URI.对于一个不带有credentials的请求,可以指定为'*',表示允许来自所有域的请求. 举个栗子,允许来自 http://mozilla.com 的请求,你可以这样指定: [crayon-583580f1a3e6d928912362/] 如果服务器端指定了域名,而不是'*',那么响应头的Vary值里必须包含Origin.它告诉客户端: 响应是根据请求头里的Origin的值来返回不同的内容的.

Access-Control-Expose-Headers

Requires Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
设置浏览器允许访问的服务器的头信息的白名单: [crayon-583580f1a3e73344613385/] 这样, X-My-Custom-Header 和 X-Another-Custom-Header这两个头信息,都可以被浏览器得到.

Access-Control-Max-Age

这个头告诉我们这次预请求的结果的有效期是多久,如下: [crayon-583580f1a3e78715026637/] delta-seconds 参数表示,允许这个预请求的参数缓存的秒数,在此期间,不用发出另一条预检请求.

Access-Control-Allow-Credentials

告知客户端,当请求的credientials属性是true的时候,响应是否可以被得到.当它作为预请求的响应的一部分时,它用来告知实际的请求是否使用了credentials.注意,简单的GET请求不会预检,所以如果一个请求是为了得到一个带有credentials的资源,而响应里又没有Access-Control-Allow-Credentials头信息,那么说明这个响应被忽略了. [crayon-583580f1a3e7d747521262/] 带有credential的请求.

Access-Control-Allow-Methods

指明资源可以被请求的方式有哪些(一个或者多个). 这个响应头信息在客户端发出预检请求的时候会被返回. 上面有相关的例子. [crayon-583580f1a3e82971546128/] 发出预检请求的例子见上,这个例子里就有向客户端发送Access-Control-Allow-Methods响应头信息.

Access-Control-Allow-Headers

也是在响应预检请求的时候使用.用来指明在实际的请求中,可以使用哪些自定义HTTP请求头.比如 [crayon-583580f1a3e88420577400/] 这样在实际的请求里,请求头信息里就可以有这么一条: [crayon-583580f1a3e8d978073563/] 可以有多个自定义HTTP请求头,用逗号分隔. [crayon-583580f1a3e91756525726/]

HTTP 请求头

这部分内容列出来当浏览器发出跨域请求时可能用到的HTTP请求头.注意这些请求头信息都是在请求服务器的时候已经为你设置好的,当开发者使用跨域的XMLHttpRequest的时候,不需要手动的设置这些头信息.

Origin

表明发送请求或者预请求的域 [crayon-583580f1a3e97162202231/] 参数origin是一个URI,告诉服务器端,请求来自哪里.它不包含任何路径信息,只是服务器名.
Note: Origin的值可以是一个空字符串,这是很有用的.
注意,不仅仅是跨域请求,普通请求也会带有ORIGIN头信息.

Access-Control-Request-Method

在发出预检请求时带有这个头信息,告诉服务器在实际请求时会使用的请求方式 [crayon-583580f1a3e9c428126084/]  

Access-Control-Request-Headers

在发出预检请求时带有这个头信息,告诉服务器在实际请求时会携带的自定义头信息.如有多个,可以用逗号分开. [crayon-583580f1a3ea1588455460/] 本文:http://www.paymoon.com:8001/index.php/2016/11/23/request-header-field-content-type-is-not-allowed-by-access-control-allow-headers-in-preflight-response/

浏览器支持

 
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4 3.5 8 (via XDomainRequest) 10 12 4

注意:

Internet Explorer 8 和 9 通过 XDomainRequest 对象来实现CORS ,但是在IE 10中有完整的实现。Firefox 3.5 就引入了对跨站 XMLHttpRequests 和 Web 字体的支持 ,尽管存在着一些直到后续版本才取消的限制。特别的, Firefox 7 引入了对跨站 WebGL 纹理的 HTTP 请求的支持,而且 Firefox 9 添加对通过 drawImage 在 canvas 上绘图的支持。 相关参考: http://www.paymoon.com:8001/index.php/2016/05/30/java-web-support-cors-visit/ https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin http://stackoverflow.com/questions/16190699/automatically-add-header-to-every-response 本文:http://www.paymoon.com:8001/index.php/2016/11/23/request-header-field-content-type-is-not-allowed-by-access-control-allow-headers-in-preflight-response/

Viewing all articles
Browse latest Browse all 130

Trending Articles