跨域访问小结 HTTP-访问控制（CORS）

雨点打透心脏的1/2处 2021-11-23 11:08 323阅读 0赞

跨域资源共享([CORS][]) 是一种机制，它使用额外的 [HTTP][] 头来告诉浏览器  让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器**不同的域、协议或端口**请求一个资源时，资源会发起一个**跨域 HTTP 请求**。

比如，站点 http://domain-a.com 的某 HTML 页面通过 [<img> 的 src ][img_ _ src]请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDkxODEy_size_16_color_FFFFFF_t_70][]

1.后端添加拦截器，配置返回请求头：

@Configuration
    public class CorsConfig extends WebMvcConfigurerAdapter {
    
    	@Override
    	public void addInterceptors(InterceptorRegistry registry) {
    		registry.addInterceptor(new HandlerInterceptor() {
    			@Override
    			public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
    					throws Exception {
    				String origin = request.getHeader("Origin"); //配置允许源
    				response.addHeader("Access-Control-Allow-Origin", origin);
    				response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");    //配置允许方式
    				response.addHeader("Access-Control-Allow-Headers",
    						"Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,token");
    
    				return true;
    			}
    
    			@Override
    			public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
    								   ModelAndView modelAndView) throws Exception {
    
    			}
    
    			@Override
    			public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler,
    										Exception ex) throws Exception {
    			}
    		});
    	}
    }
    
    
    //或者拦截器中添加以下内容（两者加一即可）
    
      @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
            //跨域请求
            String origin = request.getHeader("Origin");
            response.setHeader("Access-Control-Allow-Origin", origin);
            response.setHeader("Access-Control-Allow-Methods", "*");
            response.setHeader("Access-Control-Allow-Headers", "Origin,Content-Type,Accept,token,X-Requested-With");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setCharacterEncoding("UTF-8");
            response.setContentType("application/json; charset=utf-8");
            PrintWriter out;
            、
        }

2.前端添加配置

[CORS]: https://developer.mozilla.org/en-US/docs/Glossary/CORS
[HTTP]: https://developer.mozilla.org/en-US/docs/Glossary/HTTP
[img_ _ src]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Img#Attributes
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDkxODEy_size_16_color_FFFFFF_t_70]: /images/20211122/0af8602ecd17448898024eca81d7baae.png