什么是同源策略:
web的安全有同源的一份力量,同源会阻止一个域(协议+主机+端口号)的js脚本和另一个域的内容交互。
什么是跨域请求:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
当一个请求的里面的协议和域名和端口有一个和当前页面的不一样,就是跨域请求。
跨域请求会触发非同源限制
- 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
- 无法向非同源地址发ajax请求
前端开发的时候使用webpack的服务器设置反向代理
部署的时候在NGINX设置反向代理
后端实现CORS跨域请求的方式
跨域资源共享(Cross-Origin Resource Sharing)。
当下的 Web 应用程序开发基本都采用了前后端分离的开发模式,数据的获取并非同源,所以跨域问题在我们日常开发中特别常见。例如,当我们从“test.com”这个域名发起请求时,浏览器为了一定的安全因素考虑,并不会允许请求去访问“api.test.com”这个域名,因为请求已经跨越了两个域名。
请注意,跨域是浏览器的一种同源安全策略,是浏览器单方面限制的,所以仅在客户端运行在浏览器中才需要考虑这个问题。从原理上讲,实际就是浏览器在 HTTP 请求的消息头部分新增一些字段,如下所示:
1 2 3 4 5 6
| Origin
Access-Control-Request-Method
Access-Control-Request-Headers
|
当浏览器进行跨域请求时会和服务器端进行一次的握手协议,从响应结果中可以获取如下信息:
1 2 3 4 5 6
| Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
|
因此,实现 CORS 的关键是服务器。只要服务器合理设置这些响应结果中的消息头,就相当于实现了对 CORS 的支持,从而支持跨源通信。
这样响应的时候就可以加上允许跨域,但是如果开发阶段的常见使用webpack自带的服务器启动之后,使用浏览器直接请求,此时就要在webpack自己的服务器里面设置反向代理,才可以请求,就相当于是部署的时候使用NGINX作为反向代理。
最终目的都是修改响应头,向响应头中添加浏览器所要求的数据,进而实现跨域
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| package com.deltaqin.bilibili.config;
import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowCredentials(true) .allowedOrigins("*") .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) .allowedHeaders("*") .exposedHeaders("*"); } }
|
返回新的CorsFilter(全局跨域)
任意配置类,返回一个 新的 CorsFIlter Bean ,并添加映射路径和具体的CORS配置路径。
Spring 中也存在一个 CorsFilter 过滤器,不过这个过滤器并不是 Spring Security 提供的,而是来自Spring Web MVC。在 CorsFilter 这个过滤器中,首先应该判断来自客户端的请求是不是一个跨域请求,然后根据 CORS 配置来判断该请求是否合法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| package com.deltaqin.bilibili.config;
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter;
@Configuration public class GlobalCorsConfig { @Bean public CorsFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); config.addAllowedOrigin("*"); config.setAllowCredentials(true); config.addAllowedMethod("*"); config.addAllowedHeader("*"); config.addExposedHeader("*"); UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource(); corsConfigurationSource.registerCorsConfiguration("/**",config); return new CorsFilter(corsConfigurationSource); } }
|
@CrossOrigin (局部跨域)类和方法上面
1 2 3 4 5 6
| @RestController("/user")
@CrossOrigin(allowCredentials = "true", allowedHeaders = "*", origins = "*") @Api(tags = "用户接口") @Slf4j public class UserController {
|
1 2 3 4 5 6
| @RequestMapping("/hello") @CrossOrigin(origins = "*")
public String hello() { return "hello world"; }
|
手动设置响应头 (HttpServletResponse)
添加响应头(Access-Control-Allow-Origin)来授权原始域
1 2 3 4 5
| @RequestMapping("/index") public String index(HttpServletResponse response) { response.addHeader("Access-Allow-Control-Origin","*"); return "index"; }
|
自定web filter 实现跨域
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| package com.deltaqin.bilibili.config;
import org.springframework.stereotype.Component;
import javax.servlet.*; import javax.servlet.http.HttpServletResponse; import java.io.IOException;
@Component public class MyCorsFilter implements Filter { public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type"); chain.doFilter(req, res); } public void init(FilterConfig filterConfig) {} public void destroy() {} }
|
配置类或者 web.xml 里面使得过滤器生效。
参考链接
https://mp.weixin.qq.com/s/jUvcs5HY0YXKOAf5bsY-BA