spring boot-静态资源跨域

本文介绍如何在SpringBoot项目中实现全局CORS跨域请求配置,通过自定义配置类和Bean,设置允许所有域名、头和方法,实现简单且有效的跨域解决方案。
package com.jscz.framework.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;

@Configuration
public class CorsConfig {

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); //允许任何域名
        corsConfiguration.addAllowedHeader("*"); //允许任何头
        corsConfiguration.addAllowedMethod("*"); //允许任何方法
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); //注册
        return new CorsFilter(source);
    }

}

Spring Boot应用中访问Vue生成的静态文件,可以通过以下方式进行配置: ### 静态资源目录配置 Spring Boot 默认会从特定的目录加载静态资源文件。通常,Vue 项目构建后会生成一个 `dist` 目录,其中包含所有静态资源(如 HTML、CSS、JavaScript 文件)。将 `dist` 目录的内容复制到 Spring Boot 项目的静态资源目录中,例如 `src/main/resources/static` 或 `src/main/resources/public`,即可通过 Spring Boot 提供静态资源访问。 ```java // 默认情况下,Spring Boot 会自动从以下目录加载静态资源: // - src/main/resources/static // - src/main/resources/public ``` ### 配置自定义静态资源路径 如果需要将静态资源放置在其他路径,可以在 `application.properties` 或 `application.yml` 文件中配置自定义路径。 #### 使用 `application.properties` 配置: ```properties spring.web.resources.static-locations=classpath:/static/,file:./dist/ ``` #### 使用 `application.yml` 配置: ```yaml spring: web: resources: static-locations: classpath:/static/, file:./dist/ ``` 上述配置将 `dist` 目录作为静态资源路径的一部分,Spring Boot 会从这些路径加载静态文件。 ### 使用 Nginx 部署 Vue 生成的静态文件 在生产环境中,推荐使用 Nginx 部署 Vue 生成的静态文件,并将请求转发到 Spring Boot 应用。通过配置 Nginx,可以实现静态资源的高效访问以及前后端的统一入口。 #### Nginx 配置示例: ```nginx server { listen 80; server_name yourdomain.com; # 静态资源路径 location / { root /path/to/dist; index index.html; try_files $uri $uri/ /index.html; } # API 请求转发到 Spring Boot 应用 location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` ### 问题处理 在前后端分离开发中,Vue 前端和 Spring Boot 后端可能运行在不同的端口上。为了解决问题,可以在 Spring Boot 中配置全局支持。 #### 使用 `@CrossOrigin` 注解: ```java @RestController @CrossOrigin(origins = "http://localhost:8081") // Vue 前端地址 @RequestMapping("/api") public class ArticleController { // 控制器方法 } ``` #### 全局配置: ```java @Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://localhost:8081") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowedHeaders("*") .allowCredentials(true); } } ``` 通过上述配置,可以确保 Spring Boot 应用能够正确访问 Vue 生成的静态文件,并解决前后端交互中的问题[^1]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值