Bootstrap

跨域资源共享（CORS）问题与解决方案

跨域资源共享（CORS，Cross-Origin Resource Sharing）是现代web开发中常见且重要的一个概念。它涉及到浏览器的同源策略（Same-Origin Policy），该策略用于防止恶意网站从不同来源窃取数据。然而，在实际开发中，我们经常需要与不同源的资源进行交互，这就引发了跨域问题。本文将详细讨论跨域问题的产生原因、工作流程以及在Spring Boot后端和Axios前端环境中解决跨域问题的方法。

跨域问题的产生原因

同源策略

同源策略是浏览器的一个重要安全机制，用于防止一个网站的脚本与另一个网站的内容进行交互。两个URL被认为是同源的，必须满足以下三个条件：

  1. 协议相同（如http与https不同源）。
  2. 域名相同（如example.com与sub.example.com不同源）。
  3. 端口相同（如http://example.com:80与http://example.com:8080不同源）。

跨域问题

跨域问题产生的原因主要是因为浏览器的同源策略。浏览器限制了从一个源（Origin）加载的文档或脚本与不同源（如不同域、协议或端口）资源的交互。例如，当你的前端应用在http://localhost:3000上运行，而后端API在http://localhost:8080上提供服务时，直接从前端向后端发送请求就会触发跨域问题。

CORS 工作流程

CORS 是一种浏览器技术，它允许服务器明确地表明哪些来源可以访问它的资源。CORS 由一组 HTTP 头部字段组成，这些字段允许服务器描述哪些来源（域、协议和端口）有权限访问服务器上的资源。

简单请求与预检请求

简单请求

简单请求是指那些使用以下方法的请求：

  • GET
  • HEAD
  • POST（带有某些特定类型的Content-Type，如text/plain、multipart/form-data、application/x-www-form-urlencoded）

当浏览器发送一个简单请求时，它会在请求头中包含Origin字段，服务器根据这个字段决定是否允许请求。如果允许，服务器会在响应头中包含Access-Control-Allow-Origin字段。

示例：
前端请求：

axios.get('http://localhost:8080/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

后端响应：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:3000
Content-Type: application/json

{
  "data": "some data"
}
预检请求

对于复杂请求（如使用PUT、DELETE方法，或自定义头部字段的请求），浏览器会在实际请求之前发送一个OPTIONS请求，这就是所谓的预检请求。预检请求的目的是探测服务器是否允许实际请求。

预检请求的示例：
前端请求：

axios.post('http://localhost:8080/api/data', {data: 'some data'}, {
  headers: {
    'Custom-Header': 'value'
  }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

浏览器发送的预检请求：

OPTIONS /api/data HTTP/1.1
Origin: http://localhost:3000
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Custom-Header

服务器响应：

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Custom-Header

如果预检请求被允许，浏览器会发送实际请求。

Spring Boot中解决CORS问题

在Spring Boot中，我们可以通过多种方式配置CORS策略，允许前端的跨域请求。

使用注解配置CORS

最简单的方式是使用注解@CrossOrigin，可以直接在控制器类或方法上使用该注解。

示例：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class MyController {

    @CrossOrigin(origins = "http://localhost:3000")
    @GetMapping("/api/data")
    public String getData() {
        return "some data";
    }
}

全局配置CORS

如果需要在整个应用程序中统一配置CORS策略，可以通过实现WebMvcConfigurer接口来配置。

示例：

import org.springframework.context.annotation.Bean;
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 MyConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*");
            }
        };
    }
}

通过过滤器配置CORS

还可以通过注册一个CORS过滤器来实现跨域配置，这种方式更灵活，可以更好地控制请求的各个方面。

示例：

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpServletResponse = (HttpServletResponse) response;
        HttpServletRequest httpServletRequest = (HttpServletRequest) request;
        
        httpServletResponse.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
        httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
        httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");

        if ("OPTIONS".equalsIgnoreCase(httpServletRequest.getMethod())) {
            httpServletResponse.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(request, response);
        }
    }
}

Axios配置CORS请求

在前端，我们使用Axios发送HTTP请求。为了处理跨域请求，需要确保Axios正确设置请求头和凭证。

基本使用

基本的GET请求和POST请求已经在前文示例中展示。对于跨域请求，需要特别注意配置withCredentials属性，如果后端需要认证信息（如Cookie）。

示例：

axios.get('http://localhost:8080/api/data', { withCredentials: true })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

自定义请求头

如果需要发送自定义请求头，需要在Axios请求配置中添加相应的头部字段。

示例：

axios.post('http://localhost:8080/api/data', { data: 'some data' }, {
  headers: {
    'Custom-Header': 'value'
  },
  withCredentials: true
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

处理预检请求

为了确保复杂请求的预检请求能成功，需要在后端正确配置Access-Control-Allow-Headers和Access-Control-Allow-Methods等头部字段。前端无需额外处理，浏览器会自动发送预检请求。

常见问题与解决方案

缺少CORS头部

如果后端响应中缺少必要的CORS头部，会导致浏览器拦截请求。确保服务器响应中包含Access-Control-Allow-Origin等头部字段。

凭证相关问题

对于需要凭证的请求（如使用Cookie），前端需设置withCredentials: true，后端需设置Access-Control-Allow-Credentials: true。

动态CORS配置

有时需要根据请求动态配置CORS策略，可以在过滤器或控制器中编写逻辑，根据请求的来源设置相应的头部字段。

示例：

import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;

@RestController
public class DynamicCorsController {

    @CrossOrigin
    @GetMapping("/api/data")
    public ResponseEntity<String> getData(HttpServletRequest request) {
        String origin = request.getHeader("Origin");
        HttpHeaders headers = new HttpHeaders();
        headers.set("Access-Control-Allow-Origin", origin);
        headers.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization");
        return ResponseEntity.ok().headers(headers).body("some data");
    }
}

结论

跨域资源共享（CORS）是现代Web开发中不可避免的问题。理解跨域问题的产生原因和工作流程，对于解决跨域问题至关重要。在Spring Boot后端和Axios前端环境中，通过配置注解、全局配置或过滤器，可以

有效解决CORS问题。本文详细探讨了跨域问题的各个方面，希望能为开发者提供有价值的参考。

参考文献

  1. Mozilla Developer Network (MDN) - Cross-Origin Resource Sharing (CORS)
  2. Spring Framework Documentation - Enabling Cross-Origin Requests for a RESTful Web Service
  3. Axios Documentation - Axios

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
STM32入门教程：气体传感器应用
HTML+CSS 静态网页练习
linux 内核配置 make menuconfig
Windows环境本地搭建泰拉瑞亚私服结合内网穿透配置公网地址远程联机
Oracle和Java数据类型对应关系
[笔记]Maven使用记录2
构建实时Web应用：使用Django Channels实现WebSocket通信的完整指南
如何在 GitHub 上找到你要的代码?
Python实现图书管理系统
三层交换实现vlan间路由
;