如何从 Reactjs 调用本地化 API？

Posted 2023-03-04

【中文标题】如何从 Reactjs 调用本地化 API？

【英文标题】：How to call localhosted API from Reactjs?

【发布时间】：2017-05-19 13:21:26

【问题描述】：

我正在尝试从我的 reactjs 客户端（在 webpack 服务器上运行）向我的 java 测试后端发出请求。

两者都是本地主机，但在不同的端口（3000 和 8888）上。

当我使用邮递员向我的后端请求时，我得到了预期的响应，所以一切似乎都很顺利。

但是，当我想从 react 请求时，我遇到了与 CORS 相关的错误：

XMLHttpRequest cannot load http://localhost:8888/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我认为我的后端服务器不允许来自我的反应服务器的 http 请求。 所以我需要找到一种方法让我的后端知道处理来自 react 的请求是可以的。

这是我的测试后端。就像我之前所说的，我的后端用作 API 而不是 servlet。

public class test 
        public Name getName() 
            Name name = new Name("John");
            return name;
        

有什么办法吗？

【问题讨论】：

您需要在响应标头中添加“Access-Control-Allow-Origin”

【参考方案1】：

我不具体了解Java，但是您需要在Java端修改响应头。

对于开发（仅在开发中），您需要有以下标题：

header("Access-Control-Allow-Origin", "*")

【讨论】：

这是正确的答案，但我认为没有任何理由将其限定为“仅在开发中”。如果服务器不在 Intranet/防火墙后面，并且任何人都可以使用 postman 或 curl 或其他方式向服务器发出请求，那么几乎总是没有充分的理由不发送 Access-Control-Allow-Origin: * 标头。唯一的情况通常是如果还需要在请求中发送凭据。但话虽如此，如果此服务器位于某个 Intranet 或防火墙内，那就另当别论了。

非常正确，听起来原始发帖人可能是从服务器提供内容的新手，所以我的安全总比抱歉要好。我也倾向于只开放绝对需要的东西，而不是开放所有东西并收紧访问权限。原版海报没有透露任何关于他/她的生产环境的细节，所以我不能在不了解完整故事的情况下提供任何可能意外应用于生产环境的建议。

【参考方案2】：

您应该在服务器端的响应标题中添加“Access-Control-Allow-xxx”。

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("Content-Type", "application/json;charset=utf-8");

【参考方案3】：

这是因为您需要添加 CORS 标头以允许跨源访问。您可以通过将标头添加到您发送的响应中来做到这一点，如下面的代码：

@GET
@Path("id")
@Produces( MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML )
public Response getPodcastById(@PathParam("id") Long id, @QueryParam("detailed") boolean detailed)
        throws IOException, AppException 
    Podcast podcastById = podcastService.getPodcastById(id);
    return Response.ok()
            .entity(podcastById, detailed ? new Annotation[]PodcastDetailedView.Factory.get() : new Annotation[0])
            .header("Access-Control-Allow-Origin", "*")
            .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
            .allow("OPTIONS").build();

有关 CORS 标头的进一步参考： http://www.codingpedia.org/ama/how-to-add-cors-support-on-the-server-side-in-java-with-jersey/#2_Adding_HTTP_headers_to_resources_with_Jersey

如果是spring，可以这样做：

package hello;

import java.util.concurrent.atomic.AtomicLong;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class GreetingController 

    private static final String template = "Hello, %s!";
    private final AtomicLong counter = new AtomicLong();
    @CrossOrigin(origins = "http://localhost:9000")
    @GetMapping("/greeting")
    public Greeting greeting(@RequestParam(required=false, defaultValue="World") String name) 
        System.out.println("==== in greeting ====");
        return new Greeting(counter.incrementAndGet(), String.format(template, name));