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

代码托管&＃xff1a;Github和Gitee&＃xff0c;国内用户使用Gitee下载速度较快。

系统环境&＃xff1a;Win10/Ubuntu&＃xff0c;JDK8&＃xff0c;maven&＃xff0c;node&＃xff0c;docker。

依赖服务&＃xff1a;MySQL8&＃xff0c;Redis5

一&＃xff0c;问题

Jeecg技术社区用户提报了一个跨域请求issue&＃xff1a;

当前代码中设置了三个cors请求&＃xff1a;

因为新接入的第三方API传递COOKIE&＃xff0c;则必须设置Access-Control-Allow-Credentials为true。

二&＃xff0c;知识延伸

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

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

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

为了支持CORS跨域访问&＃xff0c;常在过滤器或者拦截器中添加的配置如下&＃xff1a;

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&＃xff0c;Access-Control-Allow-Origin

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

2&＃xff0c;Access-Control-Allow-Methods

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

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

3&＃xff0c;Access-Control-Allow-Headers

可选字段&＃xff0c;CORS请求时默认支持6个基本字段&＃xff0c;XMLHttpRequest.getResponseHeader()方法&＃xff1a;

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

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

4&＃xff0c;Access-Control-Allow-Credentials

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

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

5&＃xff0c;Access-Control-Max-Age

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

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

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

#web开发#

举报/反馈