前后端分类项目,关于跨域的解决

本文介绍了一个Spring配置类,用于解决跨域问题并重新指定静态资源路径,确保前后端分离项目正常运行。

新增一个配置类

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

@Configuration
public class InterceptorConfig extends WebMvcConfigurationSupport {

    /**
     * 解决跨域问题
     **/
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")// 允许跨域访问的路径
                .allowedOrigins("*")// 允许跨域访问的源
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")// 允许请求方法
                .maxAge(168000)// 预检间隔时间
                .allowedHeaders("*")// 允许头部设置
                .allowCredentials(true);// 是否发送cookie
    }

    /**
     * 发现如果继承了WebMvcConfigurationSupport,则在yml中配置的相关内容会失效。 需要重新指定静态资源
     *
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations(
                "classpath:/static/");
        registry.addResourceHandler("swagger-ui.html").addResourceLocations(
                "classpath:/META-INF/resources/");
        registry.addResourceHandler("/webjars/**").addResourceLocations(
                "classpath:/META-INF/resources/webjars/");
        super.addResourceHandlers(registry);
    }

}

### 3.2 问题的产生与分类前后端分离架构中,前端系统和后端系统通常部署在不同的物理服务器或同一台服务器的不同端口上。由于浏览器的同源策略要求当前请求与目标请求的名、协议、端口都要相同,因此会产生问题[^1]。 浏览器对请求的分类如下: - **简单请求**:GET、HEAD、POST 请求,并且满足特定的 Content-Type(如 application/x-www-form-urlencoded、multipart/form-data、text/plain),这类请求会直接发送,不触发预检机制。 - **非简单请求**:PUT、DELETE 等方法,或者带有自定义请求头的请求,浏览器会先发送一个 OPTIONS 预检请求,确认服务器是否允许该请求[^1]。 ### 3.3 后端解决方案 #### 3.3.1 使用 CORS 实现支持 CORS(Cross-Origin Resource Sharing)是一种由服务器设置 HTTP 响应头来允许请求的机制。其核心思想是通过响应头告知浏览器:“这个请求我允许”[^3]。 在 Spring Boot 中可以通过以下方式配置: - 在 Controller 类或方法上添加 `@CrossOrigin` 注解: ```java @CrossOrigin @RestController public class HelloController { // Controller methods } ``` 此注解可以控制允许的来源、方法、头部等参数[^2]。 - 全局配置 CorsFilter 或使用 WebMvcConfigurer 实现全局支持: ```java @Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://<前端IP>:<前端端口>") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowCredentials(true); } } ``` #### 3.3.2 使用 Nginx 反向代理解决 另一种常见做法是在 Nginx 中配置地址转发,将前端请求代理到后端服务,从而避免问题。例如: ```nginx location /api/ { proxy_pass http://<后端服务器IP>:8080/; } ``` 同时可以在 Nginx 中添加允许的响应头: ```nginx add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; ``` 这种方式适用于生产环境,可以有效减少前端代码中的处理逻辑[^1]。 ### 3.4 前端注意事项 前端项目(如 Vue 或 React)在开发阶段通常使用本地开发服务器(如 Webpack Dev Server)运行在某个端口(如 3000)。此时需确保 API 请求的目标地址指向正确的后端接口地址,而不是 localhost。 例如,在 Axios 中配置基础 URL: ```javascript const apiClient = axios.create({ baseURL: 'http://<后端服务器IP>:8080', }); ``` 此外,若采用 Nginx 代理方案,则前端可统一访问 `/api/` 路径,无需额外配置请求头。 ### 3.5 安全性与最佳实践 尽管 CORS 和 Nginx 代理可以解决问题,但需注意以下安全事项: - 不建议在生产环境中使用 `Access-Control-Allow-Origin: *`,除非明确允许所有来源访问。 - 应限制 `allowedOrigins` 到具体的前端名或 IP 地址。 - 若启用 `allowCredentials`,必须显式指定允许的源,不能使用通配符。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值