先後端分離項目，如何解決跨域問題

SpringBoot實戰電商項目mall（18k+star）地址：github.com/macrozheng/…

摘要

跨域資源共享（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);
    }
}

複製代碼

從新運行代碼，點擊登陸按鈕

發現須要登陸認證的/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

項目源碼地址

github.com/macrozheng/…

公衆號

mall項目全套學習教程連載中，關注公衆號第一時間獲取。