spring boot 关于静态资源跨域配置

本文介绍如何在SpringBoot中配置跨域,并解决静态资源跨域问题。通过addCorsMappings实现全局跨域设置,结合addResourceHandlers指定静态资源路径,确保前端请求正常。适用于本地测试环境。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

spring boot 的跨域设置可通过addCorsMappings 来实现,当对于静态资源,此设置似乎没有生效。

通过多次实验,通过增加addResourceHandlers可解决此问题,记录一下。

对于本人,此只是本地测试的一个临时方法,生产环境不推荐此方法。

@Configuration
@EnableWebMvc
public class WebConfiguration extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*","null")
            .allowedMethods("POST", "GET","PUT", "DELETE");

    }
    

    
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
                      
        registry.addResourceHandler("/common/**")
        .addResourceLocations("file:/Users/lilidan/Documents/workspace/shana-laboratory-web/src/main/webapp/common/")
        .setCachePeriod(1);
    }
    
}

 

### 解决Vue前端与Spring Boot后端之间CORS问题 #### 配置Nginx反向代理解决问题 在宝塔面板中,可以通过配置Nginx来实现反向代理,从而有效解决前后端分离项目中的访问问题。具体操作如下: 对于Nginx的配置文件,在`server`块内添加location指令指向后端API路径,并设置相应的代理参数。 ```nginx server { listen 80; server_name yourdomain.com; location /api/ { proxy_pass http://127.0.0.1:8088; # Spring Boot应用监听地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; add_header Access-Control-Allow-Origin *; # 允许所有源访问 add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; if ($request_method = 'OPTIONS') { return 204; } } location / { root html/dist; # Vue打包后的静态资源目录 try_files $uri $uri/ /index.html; } } ``` 此方法不仅解决了资源共享(CORS)的问题,还通过统一入口提高了系统的可维护性和安全性[^3]。 #### 修改Spring Boot应用程序以支持CORS 除了利用Nginx处理外,还可以直接调整Spring Boot项目的配置来允许特定来源的请求。这通常是在启动类或控制器层面完成的。 ```java import org.springframework.context.annotation.Bean; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/greeting-javaconfig").allowedOrigins("http://yourfrontenddomain.com"); } }; } } ``` 这种方式更加灵活,可以根据实际需求精确控制哪些接口开放给指定客户端调用[^1]。 #### 使用Vue CLI内置代理功能 如果不想额外安装Nginx,则可以在开发阶段借助Vue CLI自带的服务端代理机制快速解决问题。编辑`vue.config.js`文件加入以下内容即可让本地环境下的HTTP请求自动转发至目标服务器而无需担心浏览器同源策略限制。 ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8088', changeOrigin: true, pathRewrite: {'^/api': ''} } } } }; ``` 这种方法适用于早期测试和调试场景下简化网络通信流程[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值