SpringBoot項(xiàng)目解決跨域的四種方案分享

更新時(shí)間：2023年05月05日 09:20:43 作者：JK凱

在用SpringBoot開發(fā)后端服務(wù)時(shí)，我們一般是提供接口給前端使用，但前端通過(guò)瀏覽器調(diào)我們接口時(shí)，瀏覽器會(huì)有個(gè)同源策略的限制，即協(xié)議，域名，端口任一不一樣時(shí)都會(huì)導(dǎo)致跨域，這篇文章主要介紹跨域的幾種常用解決方案，希望對(duì)大家有所幫助

測(cè)試是否跨域

可以在瀏覽器中隨便打開一個(gè)頁(yè)面的控制臺(tái)，然后在控制臺(tái)中執(zhí)行下面這段代碼：

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:8080/user') // 替換請(qǐng)求的方法和地址
xhr.send()
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText)
    }
}

如果出現(xiàn)了如下的輸出，代表確實(shí)有跨域

一、SpringBoot 配置 CORS 解決跨域

即在我們所有響應(yīng)頭配置允許跨域訪問(wèn)，CORS也已經(jīng)成為主流的跨域解決方案。

在項(xiàng)目中創(chuàng)建一個(gè)新的配置文件
添加@Configuration注解實(shí)現(xiàn)WebMvcConfigurer接口
重寫addCorsMappings方法并設(shè)置允許跨域的代碼

具體代碼如下：

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 WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
                .allowCredentials(true) // 是否發(fā)送 Cookie
                .allowedOriginPatterns("*") // 支持域
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 支持方法
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

二、SpringBoot 通過(guò) CorsFilter 解決跨域

這種方式和上面的方式類似，也是通過(guò)Java Config的方式配置跨域訪問(wèn)，具體代碼如下:

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;
@Configuration
public class MyCorsFilter {
    @Bean
    public CorsFilter corsFilter() {
        // 1.創(chuàng)建 CORS 配置對(duì)象
        CorsConfiguration config = new CorsConfiguration();
        // 支持域
        config.addAllowedOriginPattern("*");
        // 是否發(fā)送 Cookie
        config.setAllowCredentials(true);
        // 支持請(qǐng)求方式
        config.addAllowedMethod("*");
        // 允許的原始請(qǐng)求頭部信息
        config.addAllowedHeader("*");
        // 暴露的頭部信息
        config.addExposedHeader("*");
        // 2.添加地址映射
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**", config);
        // 3.返回 CorsFilter 對(duì)象
        return new CorsFilter(corsConfigurationSource);
    }
}

三、SpringBoot 通過(guò)注解解決跨域

可以在我們的控制器類或控制器方法上添加，添加在類上表示里面所有方法都可跨域，添加在方法上表示指定方法可以跨域，具體代碼如下：

import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
    @GetMapping
    public String getAll() {
        return "成功";
    }
}

四、通過(guò) nginx 配置 CORS 解決跨域

如果我們項(xiàng)目有用 nginx 做反向代理服務(wù)器時(shí)，也可以在nginx中配置CORS來(lái)解決跨域，配置示例如下：

1.允許全部域名

server {
    ...
    location / {
        #允許 所有頭部 所有域 所有方法
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' '*';
        #OPTIONS 直接返回204
        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }
    ...
}

2.允許指定域名

map $http_origin $corsHost {
    default 0;
    "~https://aa.cn" https://aa.cn;
    "~https://bb.cn" https://bb.cn;
    "~https://cc.cn" https://cc.cn;
}
server {
    ...
    location / {
        #允許 所有頭部 所有$corsHost域 所有方法
        add_header 'Access-Control-Allow-Origin' $corsHost;
        add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' '*';
        #OPTIONS 直接返回204
        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }
    ...
}

到此這篇關(guān)于SpringBoot項(xiàng)目解決跨域的四種方案分享的文章就介紹到這了,更多相關(guān)SpringBoot解決跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: