目錄
- 前后端分離項目，如何解決跨域問題
- 什么是跨域問題
- 跨域問題演示及解決
- 點擊前端登錄按鈕
- 覆蓋默認的CorsFilter來解決該問題
- 重新運行代碼，點擊登錄按鈕
- 設置SpringSecurity允許OPTIONS請求訪問
- 重新運行代碼，點擊登錄按鈕
- 一次完整的跨域請求
- 先發起一次OPTIONS請求進行預檢
- 發起真實的跨域請求
前后端分離項目，如何解決跨域問題
跨域資源共享（CORS）是前后端分離項目很常見的問題，本文主要介紹當SpringBoot應用整合SpringSecurity以后如何解決該問題。
什么是跨域問題
CORS全稱Cross-Origin Resource Sharing，意為跨域資源共享。當一個資源去訪問另一個不同域名或者同域名不同端口的資源時，就會發出跨域請求。如果此時另一個資源不允許其進行跨域資源訪問，那么訪問的那個資源就會遇到跨域問題。
跨域問題演示及解決
我們使用mall項目的源代碼來演示一下跨域問題。此時前端代碼運行在8090端口上，后端代碼運行在8080端口上，由于其域名都是localhost，但是前端和后端運行端口不一致，此時前端訪問后端接口時，就會產生跨域問題。
點擊前端登錄按鈕
此時發現調用登錄接口時出現跨域問題。
覆蓋默認的CorsFilter來解決該問題
添加GlobalCorsConfig配置文件來允許跨域訪問。
package com.macro.mall.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;
/**
* 全局跨域配置
* Created by macro on 2019/7/27.
*/
@Configuration
public class GlobalCorsConfig {
/**
* 允許跨域調用的過濾器
*/
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
//允許所有域名進行跨域調用
config.addAllowedOrigin("*");
//允許跨越發送cookie
config.setAllowCredentials(true);
//放行全部原始頭信息
config.addAllowedHeader("*");
//允許所有請求方法跨域調用
config.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
或者使用這個配置類
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("/**")
.allowedOriginPatterns("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH")
.maxAge(3600);
}
}
重新運行代碼，點擊登錄按鈕
發現需要登錄認證的/admin/info接口的OPTIONS請求無法通過認證，那是因為復雜的跨越請求需要先進行一次OPTIONS請求進行預檢，我們的應用整合了SpringSecurity，對OPTIONS請求并沒有放開登錄認證。
設置SpringSecurity允許OPTIONS請求訪問
在SecurityConfig類的configure(HttpSecurity httpSecurity)方法中添加如下代碼。
.antMatchers(HttpMethod.OPTIONS)//跨域請求會先進行一次options請求 .permitAll()
重新運行代碼，點擊登錄按鈕
發現已經可以正常訪問。
一次完整的跨域請求
先發起一次OPTIONS請求進行預檢
- 請求頭信息：
Access-Control-Request-Headers: content-type Access-Control-Request-Method: POST Origin: http://localhost:8090 Referer: http://localhost:8090/ 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
- 響應頭信息：
Access-Control-Allow-Credentials: true Access-Control-Allow-Headers: content-type Access-Control-Allow-Methods: POST Access-Control-Allow-Origin: http://localhost:8090 Cache-Control: no-cache, no-store, max-age=0, must-revalidate Content-Length: 0 Date: Sat, 27 Jul 2019 13:40:32 GMT Expires: 0 Pragma: no-cache Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers X-Content-Type-Options: nosniff X-Frame-Options: DENY X-XSS-Protection: 1; mode=block
- 請求成功返回狀態碼為200
發起真實的跨域請求
- 請求頭信息：
Accept: application/json, text/plain
Content-Type: application/json;charset=UTF-8
Origin: http://localhost:8090
Referer: http://localhost:8090/
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
{username: "admin", password: "123456"}
password: "123456"
username: "admin"
- 響應頭信息：
Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: http://localhost:8090 Cache-Control: no-cache, no-store, max-age=0, must-revalidate Content-Type: application/json;charset=UTF-8 Date: Sat, 27 Jul 2019 13:40:32 GMT Expires: 0 Pragma: no-cache Transfer-Encoding: chunked Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers X-Content-Type-Options: nosniff X-Frame-Options: DENY X-XSS-Protection: 1; mode=block
- 請求成功返回狀態碼為200
