当第一次使用springboot+vue会踩的坑

 

在现代Web应用程序中，跨域请求（Cross-Origin Resource Sharing，CORS）是一个常见的问题，特别是在使用Spring Boot构建RESTful API时。本文将深入探讨如何在Spring Boot中处理跨域请求，以确保安全而有效的数据交互。

什么是跨域请求？

跨域请求发生在浏览器从一个域（domain）向另一个域请求资源时。由于浏览器的同源策略（Same-Origin Policy），默认情况下，JavaScript在一个源（origin）的上下文中只能访问同源的资源，而不能跨域请求数据。因此，为了在不同域之间进行数据交互，需要使用CORS来解决这一问题。

Spring Boot中的CORS配置

在Spring Boot中，可以通过配置`CorsFilter`来处理CORS。以下是一个简单的配置示例：

```java
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 {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();

        // 允许所有来源
        config.addAllowedOrigin("*");
        // 允许所有HTTP方法
        config.addAllowedMethod("*");
        // 允许所有头部信息
        config.addAllowedHeader("*");

        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}
```

这个配置允许所有来源（`*`），所有HTTP方法和所有头部信息。在实际应用中，你可能需要根据具体需求进行定制。

 配置细节解析

- `addAllowedOrigin`：指定允许的来源，可以是具体的域名或`*`表示允许所有来源。
- `addAllowedMethod`：指定允许的HTTP方法，如GET、POST等。
- `addAllowedHeader`：指定允许的头部信息。

### 在Controller中使用@CrossOrigin注解

除了全局配置外，你还可以在具体的Controller方法上使用`@CrossOrigin`注解来实现细粒度的CORS控制。例如：

```java
@RestController
@RequestMapping("/api")
public class MyController {

    @CrossOrigin(origins = "http://localhost:8081")
    @GetMapping("/example")
    public ResponseEntity<String> getExample() {
        // 处理业务逻辑
        return ResponseEntity.ok("Hello, CORS!");
    }
}
```

在上述例子中，`@CrossOrigin`注解指定了允许的来源为`http://localhost:8081`。

通过以上配置，你可以轻松地在Spring Boot应用程序中处理跨域请求，确保安全可靠的数据交互。在实际开发中，请根据项目的需求选择合适的配置方式。

 

 

 

前端与后端协同解决跨域

除了在后端进行CORS配置外，前端也可以采取一些措施来解决跨域问题。例如，在发起请求时可以使用带有CORS支持的库（如axios）或者在请求头中添加适当的信息。

 

 

 

1. 使用axios库

如果你的前端项目使用axios作为HTTP客户端，可以通过以下方式处理跨域请求：

// 安装axios：npm install axios

import axios from 'axios';

 

// 在请求中添加withCredentials属性

axios.get('http://localhost:8080/api/example', { withCredentials: true })

  .then(response => {

    // 处理响应数据

  })

  .catch(error => {

    // 处理

错误

  });

 

2. 携带身份信息

如果你的跨域请求需要携带身份信息（如cookie），在后端配置和前端请求中都需要设置相应的选项。

在后端配置中：

config.setAllowCredentials(true);

 

在前端中写入

axios.get('http://localhost:8080/api/example', { withCredentials: true })
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });
 

跨域问题的安全性考虑

在配置CORS时，需要考虑安全性。不建议使用通配符*允许所有来源，而是应该明确指定允许的来源。此外，应该根据实际需求限制允许的HTTP方法和头部信息，以最小化潜在的安全风险。