CORS 阻止我进行 API 调用

Question

我有一个在两个 docker 容器上运行的应用程序，一个前端（react.js）和一个后端（java，spring）。

我已经启动并运行了容器，并且可以验证它们是否可以通过 ping 相互通信。

在注意到这个问题后，我在here 上发现了一个问题，用户gok 提供了一些有用的信息和指向spring docs 的链接，非常有用。

在发现问题是 CORS 问题之前，我已按照 earlier question 中的指示将更改应用到后端代码。

因此，通过阅读 spring 文档，我将以下内容应用于我的课程

配置

@Configuration
@EnableWebMvc
public class WebConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/blockchain/**")
            .allowedOrigins("http://frontend:3000")
            .allowedHeaders("*")
            .allowedMethods("*")
            .maxAge(3600);
    }
}

注意我试过localhost和frontend（容器名）的映射名，都没有用

控制器

@RestController
@RequestMapping(value = "/api/blockchain")
public class BlockchainController {

    @CrossOrigin
    @GetMapping(value = "/address/create")
    public ResponseEntity<String> getNewAddress() {
        String newAddress = blockchainService.getNewAddress();

        if (StringUtils.isNotBlank(newAddress)) {
            return new ResponseEntity<String>(newAddress, HttpStatus.OK);
        }

        return new ResponseEntity<String>(HttpStatus.INTERNAL_SERVER_ERROR);
    }

注意在询问控制器类还有更多内容之前，我只包含了必要的内容。

控制台错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://multichain-api:8080/api/blockchain/address/create. (Reason: CORS request did not succeed).

自从我在我的应用程序中包含 cors 配置以来，这个错误总是出现并且没有改变。容器日志中也没有显示任何错误。

对此的任何帮助或见解将不胜感激。

Answer 1

我以前也是这样，你可以试试吗？与您尝试的不同，我添加了一些exposedHeaders()。

@Configuration
@EnableWebMvc
public class WebConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/blockchain/**")
                .allowedOrigins("http://frontend:3000")
                .allowedHeaders("*")
                .allowedMethods("*")
                .exposedHeaders("Access-Control-Allow-Headers",
                        "Access-Control-Allow-Origin, Origin, Accept, X-Requested-With, " +
                                "Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers")
                .maxAge(3600);
    }
}

U 可以删除不需要的 headers，它是用exposeHeaders 方法编写的。所以你的问题是不暴露"Access-Control-Allow-Origin"。你只能使用这个或更多。

Answer 2

这在我当地对我有用。

    @CrossOrigin(origins = "http://frontend:3000")
    @GetMapping(value = "/address/create")
    public ResponseEntity<String> getNewAddress() {
      ...}