Question

我正在尝试从客户端呈现的react应用程序向在同一台计算机上运行的服务器执行发布请求，但是出现了很多错误。

我启用了可以缓解CORS问题的浏览器插件，并且还在服务器端放置了一个临时过滤器以传递标头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。

我尝试了使用不同标头的呼叫的几种变体，但主机标头除外，因为它也对此有所抱怨。我已经尝试使用提取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相关的错误。

Answer 1

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

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

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

服务器上的“ access-control-allow-headers：content-type”。

参考：

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

步骤1 ：（飞行前请求）

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

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

此回复包含以下信息：

允许的起源（例如：xyz.com，*）
允许的方法（例如：获取，发布，删除，放置...）
允许的标题（例如：授权，内容类型，*）

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

更多信息：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

客户端React JS发布请求

1 个答案: