CORS 阻止我进行 API 调用

Posted 2023-03-04

【中文标题】CORS 阻止我进行 API 调用

【英文标题】：CORS is preventing me making API calls

【发布时间】：2019-02-13 14:28:15

【问题描述】：

我有一个在两个 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 配置以来，这个错误总是出现并且没有改变。容器日志中也没有显示任何错误。

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

【问题讨论】：

你可以尝试在你的WebConfiguration.class 中使用这个注释@Order(SecurityProperties.IGNORED_ORDER) 而不是@EnableWebMvc

刚试了一下，还是一样的错误

我发布了新答案，你可以检查一下吗？

【参考方案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"。你只能使用这个或更多。

【讨论】：

所以我在不同的时间尝试了exposeHeaders 和EnableWebMvc 和Order(SecurityProperties.IGNORED_ORDER)，但它仍然相同。我对此感到非常困惑，因为控制台上的错误每次都是一样的，并且后端根本没有日志

原来我正在调用 docker 容器，而我应该调用 localhost。一旦我改变了这个，你提出的解决方案就奏效了。干杯

【参考方案2】：

这在我当地对我有用。

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

【讨论】：

我认为这是个坏主意。基本 url 或端口信息在属性或配置文件中。因此，如果您更改配置文件，则必须更改此 CrossOrigin 映射。所以不是一个好的选择。

我同意，这只是 localhost 测试的一个选项。

就像一个开发者的谎言，“它适用于我的本地”:) 只是开玩笑的伙伴

这是我尝试的第一件事，不幸的是它对我不起作用