从 API 获取 POST 数据（节点 js，反应）答案

【问题标题】：fetching POST data from API (node js, react)从 API 获取 POST 数据（节点 js，反应）
【发布时间】：2017-02-20 15:37:03
【问题描述】：

我正在尝试向我的 API 发出 POST 请求。处理程序当前看起来像这样...

app.post('/login', function(req, res, next) {
    console.log("here");
    ...
});

此 API 托管在 localhost 8080 上。我正在获取数据...

fetch('http://localhost:8080/login', {
        method: 'post',
        headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json'
        },
        body: JSON.stringify({
         username: this.state.username,
         password: this.state.password
        })
    });

我所传递的暂时无关紧要，我只想发出一个成功的 POST 请求。当我提交表单时，它会获取 API，这是我在控制台上收到的消息...

OPTIONS /login 200 8.177 ms - 4

看起来好像有什么工作，但实际上没有，console.log("here"); 永远不会被调用。

我认为我没有正确调用 API。如果我删除标头，则会进行 POST 调用，但是我相信我需要这些标头，因为它们对于将数据传递给 response 很重要。我该怎么办？

【问题讨论】：

标签： node.js api reactjs

【解决方案1】：

您可能面临 CORS 权限问题。如果您从与正在运行的节点服务器的 url 不同的任何主机（如本地文件系统）为您的 Web 应用程序提供服务，这种情况总是会发生。浏览器将所有 ajax 访问限制为与协议、子域、域甚至端口不完全匹配的 url。

您可以host the static HTML/JS/CSS from the node server，这可能会解决问题。或者您可以尝试将 CORS 权限添加到您的节点服务器。

基本上，假设您使用的是 express，在节点中的 /login 路由之前添加类似以下内容：

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

您可以在 MDN 或 enable-cors.org 上阅读更多关于 CORS 访问限制的信息

【讨论】：

了解这一点很有用，但我尝试了可以在网上找到的所有变体以启用 cors，但我仍然遇到同样的问题。但是，当我删除标题时，它可以工作。

【解决方案2】：

希望对大家有所帮助。

将此添加到获取请求中

headers: {
  'Content-Type': 'application/x-www-form-urlencoded',
},

【讨论】：

不要在 Content-Type 中。