Question

我正在尝试向我的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非常重要。我该怎么办？

Answer 1

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

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

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

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访问限制的更多信息

Answer 2

我希望它会对某人有所帮助。

将此添加到提取请求

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

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

2 个答案: