报错：跨域问题解决 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加上以下内容即可：

 @Beanpublic 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了，如果你有加了的话。

报错：跨域问题解决 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.
坑是一个一个踩出来的... 报错如下: Access to XMLHttpRequest at 'http://apps.eshimin.com/traffic/gjc/getArriveBase?n ...
解决springboot跨域问题No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
文章目录 1.问题描述 2.问题产生 3.解决方案 1. 在WebMvcConfig添加(推荐使用) 2.直接采用SpringBoot的注解@CrossOrigin 1.Controller层在需要跨 ...
新版本Chrome同源策略、跨域问题处理No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
本文的方法实用于本地调试浏览器的设置,如果想要彻底解决需要使用 CORS(跨域资源共享) [ 相关文章 ] Python 使用 CORS 跨域资源共享解决 flask 服务器跨域问题.浏览器同源策略 ...
js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource
js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...
解决跨域问题：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. PS:如果遇到这个问题 Request header field Content-Type is ...
Vue--使用webpack解决跨域问题：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
原文网址:Vue--使用webpack解决跨域问题:No 'Access-Control-Allow-Origin' header is present on the requested resour ...
header is present on the requested resource. Origin 'null' is therefore not allowed access.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is there ...
vue跨域问题解决：Access to XMLHttpRequest at‘httplocalhost
前两天遇到了跨域问题,报了Access to XMLHttpRequest at'httplocalhost的错,在网上找了一些资料,我是通过配置vue.config.js.proxy实现的,感觉非常 ...
解决直接打开 vite +vue3 打包的 HTML 文件报错跨域 from origin ‘null‘ has been blocked by CORS policy
问题原因 vite 是直接使用原生 ES6 模块打包的 <script type="module" />(是让浏览器接管了打包程序的部分工作),然而 ES6 模块遵循 ...

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

报错：跨域问题解决 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.相关推荐

最新文章

热门文章