共计 1214 个字符,预计需要花费 4 分钟才能阅读完成。
被调用方 -Filter 解决方案
在响应头增加字段,告诉浏览器我允许对方跨域调用。所以我们可以在 filter 上增加相应头
浏览器是先执行还是先判断?
浏览器在发出请求的时候会先判断请求是简单请求还是非简单请求。如果是简单请求它就会先执行后判断,如果是非简单请求他就会先发一个预检命令,检查通过之后他才会把跨域请求发出去。
浏览器如何判断?
我们可以通过对比普通请求和跨域请求请求头里面的区别,对比之后发现跨域请求的请求头里面多了一个 orgin 字段。这个字段的值是当前域名的信息。浏览器发现这个请求是跨域请求的时候,它就会在请求头里面增加一个当前域的信息的字段。然后等请求返回回来的时候,他就会检查下响应头里面有没有允许跨域的信息如果没有他就会报错。
filter 代码实现
简单请求和非简单请求:
1、简单请求:
方法为 GET、HEAD、POST 的请求,并且请求头(header)里面没有自定义头;Content-Type 为 text/plain、multipart/form-data、application/x-www-form-urlencoded。
2、非简单请求:
方法为 PUT、DELETE 的请求,发送 JSON 格式的 ajax 请求、带自定义请求头的 ajax 请求。
例子:发送 JSON 格式的 ajax 请求
Access-Control-Allow-Headers 是什么?有什么作用?
响应头部 Access-Control-Allow-Headers 用于 preflight request(预检请求)中,列出了将会在正式请求的 Access-Control-Expose-Headers 字段中出现的首部信息。简单首部,如 simple headers、Accept、Accept-Language、Content-Language、Content-Type(只限于解析后的值为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 三种 MIME 类型(不包括参数)),它们始终是被支持的,不需要在这个首部特意列出。
Access-Control-Max-Age 是什么?
浏览器的同源策略,就是出于安全考虑,浏览器会限制从脚本发起的跨域 HTTP 请求(比如异步请求 GET, POST, PUT, DELETE, OPTIONS 等等),所以浏览器会向所请求的服务器发起两次请求,第一次是浏览器使用 OPTIONS 方法发起一个预检请求,第二次才是真正的异步请求,第一次的预检请求获知服务器是否允许该跨域请求:如果允许,才发起第二次真实的请求;如果不允许,则拦截第二次请求。Access-Control-Max-Age 用来指定本次预检请求的有效期,单位为秒,,在此期间不用发出另一条预检请求。
例如:res.addHeader(“Access-Control-Max-Age”, “3600”),表示隔 60 分钟才发起预检请求