javascript - 客户端 React JS 发布请求

问题描述

我正在尝试从客户端呈现的反应应用程序向运行在同一台机器上的服务器执行发布请求，但我遇到了一堆错误。

我启用了一个可以缓解 CORS 问题的浏览器插件，我还在服务器端放置了一个临时过滤器来传递 header Access-Control-Allow-Origin : *。

我对这方面的GET要求没有异议。我可以很好地查询 API。

不幸的是，情况并非如此POST（如果答案很明显，请原谅我的无知 - 甚至可以发出客户端发帖请求吗？）

bellow 是执行请求并期望控制台上的结果的函数。

    const postAddCategory = () => {

        const myHeaders = {host: "localhost:3000"};

        const body = {"productCategoryName": categoryName, "enabled": enabled};

        const config = {
            headers: myHeaders
        };
        axios.post("http://localhost:8080/products/categories/category/add", body, config)
            .then(r => console.log(r.data))
    }

错误：

有趣的事实是请求根本没有到达 API。

我已经尝试了几种具有不同标头的调用变体，不包括主机标头，因为它也在抱怨这一点。我已经尝试过使用 fetch API。没运气。

任何帮助将不胜感激。

谢谢

编辑

即使调用没有到达 API，

API是用Java（Spring Boot）构建的，过滤器如下：

@Component
public class ForDevelopmentOnlyFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request,
                         ServletResponse response,
                         FilterChain chain) throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse res = (HttpServletResponse) response;

        res.addHeader("Access-Control-Allow-Origin", "http://localhost:3000");
        chain.doFilter(req, res);
    }
}

上述工作是因为该GET请求在添加之前抱怨与 CORS 相关的错误。

标签： javascriptaxios

问题的根本原因由错误显示 -

Access-control-allow-headers 不允许内容类型

可以通过向服务器显式添加以下标头来解决此问题：

服务器上的“访问控制允许标头：内容类型”。

参考：

来自浏览器的 AJAX 请求遵循以下 3 个步骤：

第 1 步：（飞行前请求）

浏览器使用“HTTP OPTIONS”请求向服务器请求许可。这也称为“飞行前”请求。

第 2 步：（服务器告诉选项） 服务器响应飞行前请求并向浏览器指示允许的内容。

此响应包含以下信息：

允许的来源（例如：xyz.com、*）
允许的方法（例如：get、post、delete、put ...）
允许的标头（例如：授权、内容类型、*）

第 3 步： 浏览器检查服务器提供的选项并发出实际的 AJAX 请求，前提是服务器提供的选项允许。

javascript - 客户端 React JS 发布请求

问题描述

解决方案

推荐阅读