在路由器外部访问时Spring React Chrome CORS错误

基础概念

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种机制，它使用额外的 HTTP 头来告诉浏览器，让运行在一个源（域）上的 Web 应用被允许访问来自不同源服务器上的指定资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

问题原因

当你在浏览器中运行一个 Spring Boot 应用，并且尝试从一个不同的源（例如，另一个域名的 React 应用）访问该应用时，浏览器会因为安全策略阻止这种跨域请求，除非服务器明确允许这种跨域请求。

解决方案

1. 配置 Spring Boot 允许 CORS

在 Spring Boot 应用中，你可以通过配置类或直接在控制器上添加注解来允许 CORS。

方法一：全局配置

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://example.com") // 允许的源
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的方法
                .allowedHeaders("*") // 允许的头
                .allowCredentials(true); // 是否发送 cookies
    }
}

方法二：控制器级别配置

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class MyController {

    @CrossOrigin(origins = "http://example.com")
    @GetMapping("/data")
    public String getData() {
        return "Hello, World!";
    }
}

2. 配置 Chrome 浏览器

虽然这不是一个长期解决方案，但你可以临时在 Chrome 浏览器中禁用 CORS 安全策略来进行测试。

打开 Chrome 浏览器，并输入以下命令：

chrome.exe --disable-web-security --user-data-dir

请注意，这种方法仅用于开发和测试环境，不应用于生产环境。

应用场景

CORS 主要用于以下场景：

Web 应用：当你的前端应用和后端服务部署在不同的域上时。
API 服务：当你的 API 服务需要被其他域的应用访问时。
微服务架构：在微服务架构中，不同的服务可能部署在不同的域上。

参考链接

通过以上配置，你应该能够解决在路由器外部访问时遇到的 Spring React Chrome CORS 错误。

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React项目配置1(如何管理项目公共js方法)---2018.01.11 2、React项目配置2(自己封装Ajax)---2018.01.12 3、React项目配置3(如何管理项目API接口)---2018.01.15 4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16 5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17 6、R

简单的说即为浏览器限制访问A站点下的js代码对B站点下的url进行ajax请求。比如说，前端域名是www.abc.com，那么在当前环境中运行的js代码，出于安全考虑，访问www.xyz.com域名下的资源，是受到限制的。现代浏览器默认都会基于安全原因而阻止跨域的ajax请求，这是现代浏览器中必备的功能，但是往往给开发带来不便。特别是对我这样后台开发人员来讲，这个事情简直神奇。但跨域的需求却一直都在，为了跨域，勤劳勇敢的程序猿们想出了许许多多的方法，例如，jsonP、代理文件等等。但这些做法增加了许多不必要的维护成本，而且应用场景也有许多限制，例如jsonP并非XHR，所以jsonP只能使用GET传递参数。更详细的资料可以看这里 Web应用跨域访问解决方案汇总

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云