CORS阻止我进行API调用

Question

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

我已经安装并运行了这些容器，可以验证它们是否可以通过ping相互通信。

注意到这个问题后，我研究了一下，发现了一个问题，一个用户gok提供了一些有用的信息和到spring文档的链接，这些信息非常丰富。

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

因此，通过阅读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);
    }
}

注意：我尝试了本地主机和前端（容器名称）的映射名称，但都没有成功

控制器

@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

这对我在当地的工作很有效。

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

Answer 2

我以前是这样做的，你能试试吗？与您尝试的不同，我添加了一些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);
    }
}

你可以删除用exeHeaders方法编写的不需要的标头。所以你的问题是没有公开“Access-Control-Allow-Origin”。你只能使用这个或更多。