跨域(CORS)问题的解决方案分享

阿洛呐

前后端分离项目，如何解决跨域问题

1. 跨域资源共享（CORS）是前后端分离项目很常见的问题，本文主要介绍当SpringBoot应用整合SpringSecurity以后如何解决该问题。

复制代码

什么是跨域问题

CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问的那个资源就会遇到跨域问题。

跨域问题演示及解决

1. 我们使用mall项目的源代码来演示一下跨域问题。此时前端代码运行在8090端口上，后端代码运行在8080端口上，由于其域名都是localhost，但是前端和后端运行端口不一致，此时前端访问后端接口时，就会产生跨域问题。

复制代码

点击前端登录按钮

1. 此时发现调用登录接口时出现跨域问题。

复制代码

覆盖默认的CorsFilter来解决该问题

1. 添加GlobalCorsConfig配置文件来允许跨域访问。

复制代码

1. package com.macro.mall.config;
   
2. 
   
3. import org.springframework.context.annotation.Bean;
   
4. import org.springframework.context.annotation.Configuration;
   
5. import org.springframework.web.cors.CorsConfiguration;
   
6. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
   
7. import org.springframework.web.filter.CorsFilter;
   
8. 
   
9. /**
   
10. * 全局跨域配置
    
11. * Created by macro on 2019/7/27.
    
12. */
    
13. @Configuration
    
14. public class GlobalCorsConfig {
    
15. 
    
16.     /**
    
17.      * 允许跨域调用的过滤器
    
18.      */
    
19.     @Bean
    
20.     public CorsFilter corsFilter() {
    
21.         CorsConfiguration config = new CorsConfiguration();
    
22.         //允许所有域名进行跨域调用
    
23.         config.addAllowedOrigin("*");
    
24.         //允许跨越发送cookie
    
25.         config.setAllowCredentials(true);
    
26.         //放行全部原始头信息
    
27.         config.addAllowedHeader("*");
    
28.         //允许所有请求方法跨域调用
    
29.         config.addAllowedMethod("*");
    
30.         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    
31.         source.registerCorsConfiguration("/**", config);
    
32.         return new CorsFilter(source);
    
33.     }
    
34. }

复制代码

1. 或者使用这个配置类

复制代码

1. import org.springframework.context.annotation.Configuration;
   
2. import org.springframework.web.servlet.config.annotation.CorsRegistry;
   
3. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
   
4. 
   
5. @Configuration
   
6. public class CorsConfig implements WebMvcConfigurer {
   
7. 
   
8.     @Override
   
9.     public void addCorsMappings(CorsRegistry registry) {
   
10.         registry.addMapping("/**")
    
11.                 .allowedOriginPatterns("*")
    
12.                 .allowCredentials(true)
    
13.                 .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH")
    
14.                 .maxAge(3600);
    
15.     }
    
16. 
    
17. }

复制代码

重新运行代码，点击登录按钮

1. 发现需要登录认证的/admin/info接口的OPTIONS请求无法通过认证，那是因为复杂的跨越请求需要先进行一次OPTIONS请求进行预检，我们的应用整合了SpringSecurity，对OPTIONS请求并没有放开登录认证。

复制代码

设置SpringSecurity允许OPTIONS请求访问

1. 在SecurityConfig类的configure(HttpSecurity httpSecurity)方法中添加如下代码。

复制代码

1. .antMatchers(HttpMethod.OPTIONS)//跨域请求会先进行一次options请求
   
2. .permitAll()

复制代码

重新运行代码，点击登录按钮

1. 发现已经可以正常访问。

复制代码

一次完整的跨域请求


先发起一次OPTIONS请求进行预检

• 请求头信息：
  

1. Access-Control-Request-Headers: content-type
   
2. Access-Control-Request-Method: POST
   
3. Origin: http://localhost:8090
   
4. Referer: http://localhost:8090/
   
5. User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

复制代码

• 响应头信息：
  

1. Access-Control-Allow-Credentials: true
   
2. Access-Control-Allow-Headers: content-type
   
3. Access-Control-Allow-Methods: POST
   
4. Access-Control-Allow-Origin: http://localhost:8090
   
5. Cache-Control: no-cache, no-store, max-age=0, must-revalidate
   
6. Content-Length: 0
   
7. Date: Sat, 27 Jul 2019 13:40:32 GMT
   
8. Expires: 0
   
9. Pragma: no-cache
   
10. Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
    
11. X-Content-Type-Options: nosniff
    
12. X-Frame-Options: DENY
    
13. X-XSS-Protection: 1; mode=block

复制代码

• 请求成功返回状态码为200
  

发起真实的跨域请求

• 请求头信息：
  

1. Accept: application/json, text/plain
   
2. Content-Type: application/json;charset=UTF-8
   
3. Origin: http://localhost:8090
   
4. Referer: http://localhost:8090/
   
5. User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
   
6. {username: "admin", password: "123456"}
   
7. password: "123456"
   
8. username: "admin"

复制代码

• 响应头信息：
  

1. Access-Control-Allow-Credentials: true
   
2. Access-Control-Allow-Origin: http://localhost:8090
   
3. Cache-Control: no-cache, no-store, max-age=0, must-revalidate
   
4. Content-Type: application/json;charset=UTF-8
   
5. Date: Sat, 27 Jul 2019 13:40:32 GMT
   
6. Expires: 0
   
7. Pragma: no-cache
   
8. Transfer-Encoding: chunked
   
9. Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
   
10. X-Content-Type-Options: nosniff
    
11. X-Frame-Options: DENY
    
12. X-XSS-Protection: 1; mode=block

复制代码

• 请求成功返回状态码为200
  

到此这篇关于跨域(CORS)问题的解决方案分享的文章就介绍到这了,更多相关解决跨域(CORS)问题内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

偶而看看昧

看看，学习学习～～～～

jj8001

感谢楼主分享～～～～～

一如既往325

感谢楼主分享。

王志远1

路过，支持一下

注目远方型

感谢楼主，顶。