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

Posted macrozheng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前后端分离项目，如何解决跨域问题相关的知识，希望对你有一定的参考价值。

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

什么是跨域问题

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

跨域问题演示及解决

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

点击前端登录按钮

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

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

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

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

 
   
   
 
    
  
    
    
  
  1. package com.macro.mall.config;
    2. 
  
    
    
  

    3. 
  
    
    
  
  3. import org.springframework.context.annotation.Bean;
    4. 
  
    
    
  
  4. import org.springframework.context.annotation.Configuration;
    5. 
  
    
    
  
  5. import org.springframework.web.cors.CorsConfiguration;
    6. 
  
    
    
  
  6. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    7. 
  
    
    
  
  7. import org.springframework.web.filter.CorsFilter;
    8. 
  
    
    
  

    9. 
  
    
    
  
  9. /**
    10. 
  
    
    
  
  10.  * 全局跨域配置
    11. 
  
    
    
  
  11.  * Created by macro on 2019/7/27.
    12. 
  
    
    
  
  12.  */
    13. 
  
    
    
  
  13. @Configuration
    14. 
  
    
    
  
  14. public class GlobalCorsConfig {
    15. 
  
    
    
  

    16. 
  
    
    
  
  16.  /**
    17. 
  
    
    
  
  17.  * 允许跨域调用的过滤器
    18. 
  
    
    
  
  18.  */
    19. 
  
    
    
  
  19.  @Bean
    20. 
  
    
    
  
  20.  public CorsFilter corsFilter() {
    21. 
  
    
    
  
  21.  CorsConfiguration config = new CorsConfiguration();
    22. 
  
    
    
  
  22.  //允许所有域名进行跨域调用
    23. 
  
    
    
  
  23.  config.addAllowedOrigin("*");
    24. 
  
    
    
  
  24.  //允许跨越发送cookie
    25. 
  
    
    
  
  25.  config.setAllowCredentials(true);
    26. 
  
    
    
  
  26.  //放行全部原始头信息
    27. 
  
    
    
  
  27.  config.addAllowedHeader("*");
    28. 
  
    
    
  
  28.  //允许所有请求方法跨域调用
    29. 
  
    
    
  
  29.  config.addAllowedMethod("*");
    30. 
  
    
    
  
  30.  UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    31. 
  
    
    
  
  31.  source.registerCorsConfiguration("/**", config);
    32. 
  
    
    
  
  32.  return new CorsFilter(source);
    33. 
  
    
    
  
  33.  }
    34. 
  
    
    
  
  34. }
    35.

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

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

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

设置SpringSecurity允许OPTIONS请求访问

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

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

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

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

发现已经可以正常访问。

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

一次完整的跨域请求

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

  • 请求头信息：

 
   
   
 
    
  
    
    
  
  1. Access-Control-Request-Headers: content-type
    2. 
  
    
    
  
  2. Access-Control-Request-Method: POST
    3. 
  
    
    
  
  3. Origin: http://localhost:8090
    4. 
  
    
    
  
  4. Referer: http://localhost:8090/
    5. 
  
    
    
  
  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.

  • 响应头信息：

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

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

发起真实的跨域请求

  • 请求头信息：

 
   
   
 
    
  
    
    
  
  1. Accept: application/json, text/plain, */*
    2. 
  
    
    
  
  2. Content-Type: application/json;charset=UTF-8
    3. 
  
    
    
  
  3. Origin: http://localhost:8090
    4. 
  
    
    
  
  4. Referer: http://localhost:8090/
    5. 
  
    
    
  
  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. 
  
    
    
  
  6. {username: "admin", password: "123456"}
    7. 
  
    
    
  
  7. password: "123456"
    8. 
  
    
    
  
  8. username: "admin"
    9.

  • 响应头信息：

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

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

项目源码地址

https://github.com/macrozheng/mall

推荐阅读


欢迎关注，点个在看

以上是关于前后端分离项目，如何解决跨域问题的主要内容，如果未能解决你的问题，请参考以下文章

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

使用 Nginx 部署前后端分离项目，解决跨域问题

前后端分离项目知识汇总（开发流程，跨域，开发接口）

前后端分离实践 — 如何解决跨域问题

前后端分离实践 — 如何解决跨域问题

前后端分离了，跨域问题如何解决？