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

相关文章
|
安全 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.
|
前端开发 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.
|
Web App开发 前端开发 JavaScript
Spring Cloud Gateway CORS 方案看这篇就够了
Spring Cloud Gateway CORS 方案看这篇就够了
Spring Cloud Gateway CORS 方案看这篇就够了
|
缓存 对象存储 数据安全/隐私保护
阿里云OSS图片访问出现跨域:Access to image at from origin has been blocked by CORS policy
阿里云OSS图片访问出现跨域:Access to image at from origin has been blocked by CORS policy
4293 0
阿里云OSS图片访问出现跨域:Access to image at from origin has been blocked by CORS policy
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
9591 90
|
Java 应用服务中间件 nginx
Springboot设置接口允许跨域
Springboot设置接口允许跨域
654 0
Springboot设置接口允许跨域
|
缓存 移动开发 JavaScript
阿里云OSS设置跨域访问
阿里云OSS设置跨域访问
20110 1
|
前端开发 安全 JavaScript
SpringBoot 如何解决跨域问题?
本文深入探讨了Spring Boot解决跨域问题的方法,包括全局配置CORS、使用@CrossOrigin注解和自定义过滤器,提供了详细的代码示例和分析,帮助开发者有效应对Web开发中的跨域挑战。
2294 4
Springboot文件下载跨域问题解决方案
Springboot文件下载跨域问题解决方案
|
存储 JSON 关系型数据库
基于GeoTools的GeoJson导入到PostGis实战
GeoJson是一种对各种地理数据结构进行编码的格式,基于json的地理空间信息数据交换格式。GeoJson对象可以用来表示几何,特征或者特征集合。支持地理点、线、面、多点、多线、多面及几何集合。GeoJson不是本文的重点,因此不再赘述。
2653 0
基于GeoTools的GeoJson导入到PostGis实战