Access to XMLHttpRequest at ‘http://localhost:8080/api/user/login‘ from origin ‘http://localhost...

灰白274

已于 2024-07-18 15:52:49 修改

阅读量8.2k

点赞数 13

CC 4.0 BY-SA版权

文章标签： http 网络协议网络

于 2024-07-17 19:32:05 首次发布

本文链接：https://blog.csdn.net/qq_74344288/article/details/140503498

报错原因：

1.这个问题是由于CORS策略阻止了带有凭证的请求。要解决这个问题，你需要在后端服务器上设置Access-Control-Allow-Credentials响应头为true。

2.前端axios加了 axios.defaults.withCredentials = true; //向后端发送请求时带上凭证就报错

如何解决：

这个问题是由于CORS（跨域资源共享）策略导致的。当你尝试从一个域名（http://localhost:8088）访问另一个域名（http://localhost:8080）的资源时，浏览器会执行一个安全检查，以确保请求是合法的。如果目标服务器没有正确配置CORS策略，浏览器将阻止这个请求。

要解决这个问题，你需要在服务器端（http://localhost:8080）配置CORS策略，允许来自http://localhost:8088的请求。具体来说，你需要设置Access-Control-Allow-Credentials响应头为true。

方法一：使用@CrossOrigin注解

在你的Controller类或者特定的请求处理方法上添加@CrossOrigin注解，并设置origins和allowCredentials属性。

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

@RestController
public class YourController {

    @CrossOrigin(origins = "http://localhost:8088", allowedHeaders = "*", allowCredentials = "true")
    @GetMapping("/api/user/login")
    public ResponseEntity<?> login() {
        // ...
    }
}

方法二：全局配置CORS

在配置类中，你可以配置全局的CORS设置。

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 CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8088")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

方法三：通过Filter配置CORS

你还可以通过创建一个Filter Bean来设置CORS。

import org.springframework.boot.web.servlet.FilterRegistrationBean;
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 FilterRegistrationBean<CorsFilter> corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOriginPattern("http://localhost:8088");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new CorsFilter(source));
        bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
        return bean;
    }
}

分析：

在解决Spring Boot应用中的CORS问题时，可以采用三种主要的方法：使用@CrossOrigin注解、全局配置CORS、以及通过过滤器（Filter）实现CORS。以下是对这三种方法的分析：

使用@CrossOrigin注解
- 优点：
  - 简单直接：直接在需要跨域访问的Controller类或方法上添加注解即可。
  - 细粒度控制：可以选择性地对特定的路径或方法应用CORS配置，灵活性较高。
  - 易于理解：对于新手或简单的项目来说，这种方法直观且容易实施。
- 缺点：
  - 重复性工作：如果需要在多个Controller或方法上应用相同的CORS配置，可能会有较多的重复代码。
  - 局限性：在大型项目中，如果跨域需求有所变化，可能需要在多个地方修改代码。
全局配置CORS
- 优点：
  - 统一管理：通过创建一个配置类来实现WebMvcConfigurer接口，可以集中管理应用的CORS配置。
  - 适用性广：适用于整个应用程序，不需要在每个Controller或方法上单独添加注解。
  - 灵活性：允许通过Java代码动态地修改CORS配置，比静态配置文件更灵活。
- 缺点：
  - 复杂度：相比注解方式，需要更多的配置代码，可能会增加项目的复杂度。
  - 过度配置：可能会开放一些不需要跨域访问的端点。
通过过滤器（Filter）实现CORS
- 优点：
  - 全局生效：通过实现Filter接口，可以在所有请求上应用CORS逻辑，确保一致性。
  - 自定义逻辑：可以完全自定义跨域逻辑，适用于需要特殊处理的场景。
  - 独立性：与业务逻辑分离，不直接依赖于Spring MVC的架构。
- 缺点：
  - 开发成本：需要对Servlet API有一定了解，开发和维护成本相对较高。
  - 过于全局：可能难以针对特定端点进行细粒度的控制。