spring 由于CORS策略，React前端无法与Sping Boot 后端通信

dm7nw8vv 于 2022-11-21 发布在 Spring

关注(0)|答案(1)|浏览(147)

我已经向互联网公开了两个带有ngrok的服务，示例url如下：

frontend.eu.ngrok.ioReact应用程序）
backend.ru.ngrok.io（带Kotlin的Sping Boot 应用程序）

前端尝试使用以下示例url向后端发出axios请求：

获取backend.ru.ngrok.io/helloworld

但控制台打印以下错误：

CORS策略已阻止从源“www.example.com”访问“backend.ru.ngrok.io/helloworld”上的XMLHttpRequest frontend.ru.ngrok.io ...

当我在额外的Chrome标签页或从Postman发出请求时，它成功了。所以我知道问题出在Chrome上，它不允许XMLHttpRequests从另一个来源到后端，但我尝试在我的Sping Boot 后端中修复它，方法是用以下内容注解我的端点：@CrossOrigin
我还配置了cors并将其添加到安全配置中（受https://spring.io/blog/2015/06/08/cors-support-in-spring-framework的启发）：
第一个
什么是连接前端和后端彼此的现代方式，仍然注意正确的CORS政策。我还猜测，请求甚至没有到达我的后端，造成的Chrome和它的CORS政策。我在这里做错了什么？

spring

来源：https://stackoverflow.com/questions/74454368/react-frontend-cannot-communicate-with-spring-boot-backend-because-of-cors-polic

1条答案

按热度按时间

qfe3c7zg1#

问题出在ngrok和免费计划上。如果你访问这个网站，它会显示一个“警告页面”，并给出一个很好的提示，通过将请求头“ngrok-skip-browser-warning”设置为你想要的任何值来禁用这个页面。因此，由于他们的CORS策略，ngrok的临时警告页面阻止了我从前端发送XMLHttpRequest，因此请求从未到达我的后端。
要解决这个问题，只需在React前端的所有axios请求中添加头：

axios.defaults.headers.common['ngrok-skip-browser-warning'] = "any value";

赞(0）回复(0）举报 2022-11-21

我来回答

spring 由于CORS策略，React前端无法与Sping Boot 后端通信

1条答案

相关问题

热门标签

最新问答