如何在给定api的情况下进行简单的发布请求答案

【问题标题】：How to do a simple post request on react given an api如何在给定api的情况下进行简单的发布请求
【发布时间】：2019-10-02 05:26:36
【问题描述】：

import React, { Component } from "react";
import axios from 'axios';

class App extends Component {



  handleSubmit(event) {
    axios.post('http://localhost:3050/login', {
      "username": "username",
      "password": "password"
    })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    event.preventDefault();
  }

  render() {

      return(

        <form onSubmit={this.handleSubmit}>
          <input type="submit" value="Submit" />
        </form>

      );
  }

}

export default App;

我目前正在使用rest api / react，但我无法让这个基本提交工作。所以使用邮递员“http://localhost:3050/login”作为发布请求我发送了这个json

{
    "username": "username",
    "password": "password"
}

响应正文为 200 OK 并返回

{ 
    "friends": 0,
    "id": "555"
}

这就是邮递员所提供的。我试图在上面的代码中模仿这一点，所以如果我要提交，它会在控制台日志中发布 {"friends": 0,"id": "555"}。但它什么也没做。我很困惑

【问题讨论】：

点击按钮会发生什么？
什么都没有：gyazo.com/2f41b99c964f55f34f55e72ae0eb0ddf
我在您的代码中没有看到任何问题，可能是您的服务器没有运行。确保您的服务器正在运行并且您正在访问正确的 URL。
这很奇怪。我的后端服务器正在该链接上运行，因为我在尝试此操作时正在拨打邮递员电话
您在您的 React 应用程序中发布密码值？这些是用户输入参数吗？

标签： reactjs rest

【解决方案1】：

改成

axios.post('http://localhost:3050/login',null, {params:{
    "username": "username",
    "password": "password"
   }}).
  then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
event.preventDefault();

【讨论】：

xhr.js:166 POST localhost:3050/login?username=username&password=password 400 (Bad Request) localhost/:1 从源 'localhost:3050/?username=username&password=password' 访问 XMLHttpRequest 已被 CORS 策略阻止：否请求的资源上存在“Access-Control-Allow-Origin”标头。
以上是错误。可能是因为我从未使用过参数而只是发送了一个 json？在邮递员上工作
在不安全的模式下运行开发者的chrome，例如：右键单击桌面，添加新快捷方式将目标添加为“[PATH_TO_CHROME]\chrome.exe” --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp 单击确定。并在这个 chrome 实例上推送您的站点链接
您的建议有效，但代码不需要更改。谢谢。

【解决方案2】：

默认情况下，浏览器会阻止对另一个域的请求。在您的情况下，您从http://localhost:3000 请求http://localhost:3050。由于域名不同，CORS 会上升。要解决它，您必须在端口 3050 上运行的服务器中启用 CORS。如果您使用 node-express 作为后端服务器，则使用下面的行来克服 CORS

app.all('/*', (req, res, next) => {

  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type,token, Access-Control-Request-Method, Access-Control-Request-Headers');
  if (req.method === 'OPTIONS') {
    res.sendStatus(204);
  } else {
    next();
  }
});

【讨论】：

我的后端服务器在java中