首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

基础概念

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

问题原因

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

解决方案

1. 配置 Spring Boot 允许 CORS

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

方法一:全局配置
代码语言:txt
复制
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
    }
}
方法二:控制器级别配置
代码语言:txt
复制
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 浏览器,并输入以下命令:

代码语言:txt
复制
chrome.exe --disable-web-security --user-data-dir

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

应用场景

CORS 主要用于以下场景:

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

参考链接

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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券