跨域(CORS)問題的解決方案分享-魔扣目錄

前后端分離項(xiàng)目，如何解決跨域問題

跨域資源共享（CORS）是前后端分離項(xiàng)目很常見的問題，本文主要介紹當(dāng)SpringBoot應(yīng)用整合SpringSecurity以后如何解決該問題。

什么是跨域問題

CORS全稱Cross-Origin Resource Sharing，意為跨域資源共享。當(dāng)一個(gè)資源去訪問另一個(gè)不同域名或者同域名不同端口的資源時(shí)，就會(huì)發(fā)出跨域請(qǐng)求。如果此時(shí)另一個(gè)資源不允許其進(jìn)行跨域資源訪問，那么訪問的那個(gè)資源就會(huì)遇到跨域問題。

跨域問題演示及解決

我們使用mall項(xiàng)目的源代碼來演示一下跨域問題。此時(shí)前端代碼運(yùn)行在8090端口上，后端代碼運(yùn)行在8080端口上，由于其域名都是localhost，但是前端和后端運(yùn)行端口不一致，此時(shí)前端訪問后端接口時(shí)，就會(huì)產(chǎn)生跨域問題。

點(diǎn)擊前端登錄按鈕

此時(shí)發(fā)現(xiàn)調(diào)用登錄接口時(shí)出現(xiàn)跨域問題。

跨域(CORS)問題的解決方案分享

覆蓋默認(rèn)的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 {

    /**
     * 允許跨域調(diào)用的過濾器
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允許所有域名進(jìn)行跨域調(diào)用
        config.addAllowedOrigin("*");
        //允許跨越發(fā)送cookie
        config.setAllowCredentials(true);
        //放行全部原始頭信息
        config.addAllowedHeader("*");
        //允許所有請(qǐng)求方法跨域調(diào)用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

或者使用這個(gè)配置類

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);
    }

}

重新運(yùn)行代碼，點(diǎn)擊登錄按鈕

發(fā)現(xiàn)需要登錄認(rèn)證的/admin/info接口的OPTIONS請(qǐng)求無法通過認(rèn)證，那是因?yàn)閺?fù)雜的跨越請(qǐng)求需要先進(jìn)行一次OPTIONS請(qǐng)求進(jìn)行預(yù)檢，我們的應(yīng)用整合了SpringSecurity，對(duì)OPTIONS請(qǐng)求并沒有放開登錄認(rèn)證。

跨域(CORS)問題的解決方案分享

設(shè)置SpringSecurity允許OPTIONS請(qǐng)求訪問

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

.antMatchers(HttpMethod.OPTIONS)//跨域請(qǐng)求會(huì)先進(jìn)行一次options請(qǐng)求
.permitAll()

跨域(CORS)問題的解決方案分享

重新運(yùn)行代碼，點(diǎn)擊登錄按鈕

發(fā)現(xiàn)已經(jīng)可以正常訪問。

跨域(CORS)問題的解決方案分享

一次完整的跨域請(qǐng)求

先發(fā)起一次OPTIONS請(qǐng)求進(jìn)行預(yù)檢

請(qǐng)求頭信息：

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

響應(yīng)頭信息：

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

請(qǐng)求成功返回狀態(tài)碼為200

發(fā)起真實(shí)的跨域請(qǐng)求

請(qǐng)求頭信息：

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"

響應(yīng)頭信息：

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