报错:跨域问题解决 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了,如果你有加了的话。

相关文章
|
4月前
|
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 ‘
52 0
|
4月前
|
安全 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.
|
4月前
|
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……
|
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
274 0
【已解决】No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
|
9月前
|
前端开发 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
319 0
|
9月前
|
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
148 0
|
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)
1585 0
Vue 跨域问题 的几种解决办法 (No ‘Access-Control-Allow-Origin‘ header is present on the requested resource)
|
11月前
|
Web App开发 存储 安全
新版本Chrome同源策略、跨域问题处理No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
新版本Chrome同源策略、跨域问题处理No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
501 0
|
应用服务中间件 API nginx
解决跨域问题 Response to preflight request doesn't pass access control check
解决跨域问题 Response to preflight request doesn't pass access control check
9045 0
(原因:不允许有多个 ‘Access-Control-Allow-Origin‘ CORS 头)
(原因:不允许有多个 ‘Access-Control-Allow-Origin‘ CORS 头)
264 0

热门文章

最新文章