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 config，因此该错误始终会出现，并且没有更改。同样，在容器日志中也没有显示任何错误。

我们将不胜感激。

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可以删除用ExposureHeaders方法编写的不需要的标题。因此，您的问题是没有公开"Access-Control-Allow-Origin"。您只能使用这个或更多。

Answer 2

这对我来说在我的本地工作。

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

CORS阻止我进行API调用

2 个答案: