ajax设置跨域请求参数,CORS跨域请求，设置5个参数，含义和注意要点都在这了！...

代码托管：Github和Gitee，国内用户使用Gitee下载速度较快。

系统环境：Win10/Ubuntu，JDK8，maven，node，docker。

依赖服务：MySQL8，Redis5

一，问题

Jeecg技术社区用户提报了一个跨域请求issue：

当前代码中设置了三个cors请求：

因为新接入的第三方API传递Cookie，则必须设置Access-Control-Allow-Credentials为true。

二，知识延伸

CORS是一个W3C标准，Cross-origin resource sharing，跨域资源共享，允许浏览器向跨源服务器发出XMLHttpRequest请求，解决了AJAX只允许同源使用的限制。

整个CORS通信过程由浏览器自动完成，与仅支持同源的AJAX代码完全一样。

浏览器一旦发现AJAX跨源请求，就会自动添加一些附加的头信息，有时还会多出一次附加的OPTIONS预检请求，但对用户是透明的。

为了支持CORS跨域访问，常在过滤器或者拦截器中添加的配置如下：

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

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

response.setHeader("Access-Control-Allow-Headers", "accept,x-requested-with,Content-Type,X-Custom-Header");

response.setHeader("Access-Control-Allow-Credentials", "true");

response.setHeader("Access-Control-Max-Age", "3600");

1，Access-Control-Allow-Origin

必填字段，取值可以是请求时Origin字段的值，也可以是*，表示接受任意域名的请求。

2，Access-Control-Allow-Methods

必填字段，取值是逗号分隔的一个字符串，设置服务器支持的跨域请求的方法。

注意为了避免多次OPTIONS请求，返回的是所有支持的方法，逗号分隔。

3，Access-Control-Allow-Headers

可选字段，CORS请求时默认支持6个基本字段，XMLHttpRequest.getResponseHeader()方法：

Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。

如果需要支持其他Headers字段，必须在Access-Control-Allow-Headers里面指定。

4，Access-Control-Allow-Credentials

可选字段，布尔值类型，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中；如果设为true，即表示服务器允许在请求中包含Cookie，一起发给服务器。

注意该值只能设为true，如果服务器不允许浏览器发送Cookie，删除该字段即可。

5，Access-Control-Max-Age

可选字段，用来指定预检请求的有效期，单位为秒，在此期间不用发出另一条预检请求，不指定时即使用默认值，Chrome默认5秒。

常用浏览器有不同的最大值限制，Firefox上限是24小时 (即86400秒)，Chrom是10分钟(即600秒)。

注意Access-Control-Max-Age设置针对完全一样的url，当url包含路径参数时，其中一个url的Access-Control-Max-Age设置对另一个url没有效果。

#web开发#

举报/反馈