报错:跨域问题解决 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

简介: 报错:跨域问题解决 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

报错:

Access to XMLHttpRequest at 'http://127.0.0.1:8088/user/list' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js?b50d:178 GET http://127.0.0.1:8088/user/list net::ERR_FAILED


在学习前后端分离开发的过程中,遇到这个报错是非常正常的,当然也是比较好解决的问题,莫非就是前端项目使用了一个端口,后端项目使用了一个端口,但是其实同一个ip,但是不同端口之间也不能直接获取信息的,那么就要解决它。


先说一下情况,当前我是一个Spring Boot项目,版本是2.x版本。


想要更多了解的话,你可以看一下我三年前写的一篇文章,这样子解决也行,如果是自己学习的话:SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化(进阶篇)

直接看菜单部分即可,通过软件进行端口转发,但这其实还是有点麻烦的,而且不够灵活。


在Spring Boot项目中,解决非常简单,新建一个配置类,然后用注解注入即可:


@Configuration
public class CorsConfig implements WebMvcConfigurer {
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedHeaders(CorsConfiguration.ALL)
                .allowedMethods(CorsConfiguration.ALL)
                .allowCredentials(true)
                .maxAge(3600); // 1小时内不需要再预检(发OPTIONS请求)
    }
}


重启项目,就可以解决了!

当然,如果你还没解决,还有一个常见的错误,那就是,你前端的请求路径写错了,务必要小心!!!


如果是Spring Cloud项目,使用的是Gateway网关,可直接在GatewayApplication加上以下内容即可:


  @Bean
  public CorsWebFilter corsFilter() {
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(Boolean.TRUE);
    config.addAllowedMethod("*");
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.setMaxAge(3600L);
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
    source.registerCorsConfiguration("/**", config);
    return new CorsWebFilter(source);
  }


加上了就可以删掉上面的 CorsConfig了,如果你有加了的话。

相关文章
|
2月前
|
前端开发 Java
前后端分离的跨域问题解决:No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
本文介绍了解决前后端分离项目中跨域问题的方法,包括添加`CorsConfig`配置类和重写`WebMvcConfigurer`接口的`addCorsMappings`方法,允许前端请求访问后端资源,并提供了具体的代码示例。
前后端分离的跨域问题解决:No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
|
5月前
|
前端开发 对象存储 数据安全/隐私保护
阿里云前端直传has been blocked by CORS policy: Response to preflight request doesn‘t pass access control
阿里云前端直传has been blocked by CORS policy: Response to preflight request doesn‘t pass access control
661 2
|
6月前
|
JavaScript 前端开发
has been blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘
has been blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘
151 0
|
API
【已解决】No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
403 0
【已解决】No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
|
11月前
|
安全 JavaScript 前端开发
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
|
11月前
|
JSON 数据格式
axios.post请求出错:Request header field content-type is not allowed by Access-Control-Allow-Headers in……
axios.post请求出错:Request header field content-type is not allowed by Access-Control-Allow-Headers in……
|
JavaScript Java 应用服务中间件
Vue 跨域问题 的几种解决办法 (No ‘Access-Control-Allow-Origin‘ header is present on the requested resource)
Vue 跨域问题 的几种解决办法 (No ‘Access-Control-Allow-Origin‘ header is present on the requested resource)
2008 0
Vue 跨域问题 的几种解决办法 (No ‘Access-Control-Allow-Origin‘ header is present on the requested resource)
|
应用服务中间件 API nginx
解决跨域问题 Response to preflight request doesn't pass access control check
解决跨域问题 Response to preflight request doesn't pass access control check
11547 1
|
API
百度API调用JSONP解决跨越问题 been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header
百度API调用JSONP解决跨越问题 been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header
224 0
|
前端开发 JavaScript
ajax请求的重定向处理--Request header field x-requested-with is not allowed by Access-Control-Allow-Header
ajax请求的重定向处理--Request header field x-requested-with is not allowed by Access-Control-Allow-Header
484 0