ajax请求
ajax跨域
同源
概念
最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页”同源”。所谓”同源”指的是”三个相同”。
- 协议相同（host,同为http://或https://）
- 域名相同（顶级域名和二级域名之类的也是不同的）
- 端口相同（不同端口之间的访问也是跨域）
限制范围
-
Cookie、LocalStorage 和 IndexDB 无法读取。
-
DOM 无法获得。
-
AJAX 请求不能发送。
ajax跨域问题
一般表现为接口成功返回了，status code为200，但是最后被ajax拦截了。服务器端后台允许OPTIONS请求,并且接口也允许OPTIONS请求,但是头部匹配时出现不匹配现象，比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错。解决办法需要后端增加对应的支持。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 配置过滤器，在返回值中携带对应的头
@WebFilter(filterName = "CustomFilter", urlPatterns = ["/*"])
class CommonFilter : Filter {
override fun doFilter(request: ServletRequest, response: ServletResponse, chain: FilterChain) {
val servletResponse = response as HttpServletResponse
servletResponse.apply {
setHeader("Access-Control-Allow-Origin", "*")
setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, HEAD")
setHeader("Access-Control-Max-Age", "3600")
setHeader(
"Access-Control-Allow-Headers",
"access-control-allow-origin, authority, content-type, version-info, X-Requested-With"
)
chain.doFilter(request, response)
}
}
}