Question

因此，我试图从我的React客户端接到我的节点api的调用。使用邮递员，我可以得到结果，但是对提交即时消息做出反应时出现错误500，我不知道即时消息做错了什么。这两个客户端都在我的计算机上，nodeapi运行在端口8000上，并对运行在端口3000上的客户端做出反应。有什么帮助吗？

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

export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };

    this.change = this.change.bind(this);
    this.submit = this.submit.bind(this);
  }

  change(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  submit(e) {
    e.preventDefault();
    axios
      .post("http://localhost:8000/api/users", {
        email: this.state.email,
        password: this.state.password
      })
      .then(res => localStorage.setItem("cool-jwt", res.data));
  }

  render() {
    return (
      <div>
        <form onSubmit={e => this.submit(e)}>
          <label>email</label>
          <input
            type="text"
            name="email"
            onChange={e => this.change(e)}
            value={this.state.email}
          />
          <label>password</label>
          <input
            type="text"
            name="password"
            onChange={e => this.change(e)}
            value={this.state.password}
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default Login;

//POST new user route (optional, everyone has access)
router.post('/', auth.optional, (req, res, next) => {
    const {
        body: {
            user
        }
    } = req;

    if (!user.email) {
        return res.status(422).json({
            errors: {
                email: 'is required',
            },
        });
    }

    if (!user.password) {
        return res.status(422).json({
            errors: {
                password: 'is required',
            },
        });
    }

    const finalUser = new Users(user);

    finalUser.setPassword(user.password);

    return finalUser.save()
        .then(() => res.json({
            user: finalUser.toAuthJSON()
        }));
});

通过此链接http://localhost:8000/api/users对邮递员进行POST 带有以下参数：

{
  "user": {
    "email": "myemailo@email",
    "password": "mypassword"
  }
}

我明白了：

{
    "user": {
        "_id": "5d00d9ed47566f7938a91a3d",
        "email": "myemailo@email",
        "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im15ZW1haWxvQGVtYWlsIiwiaWQiOiI1ZDAwZDllZDQ3NTY2Zjc5MzhhOTFhM2QiLCJleHAiOjE1NjU1MjA4NzcsImlhdCI6MTU2MDMzNjg3N30.ZG7vzNFoUqj_c3YcrJloeGZiORSRg0N1yVPhAvlejCs"
    }
}

但是尝试在发生错误500时做出反应。有什么帮助吗？

Answer 1

我在api端没有看到CORS标头。您需要阅读有关-https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy。

如果要启用它，则必须在cors后面加上标题。

您需要在响应中添加Access-Control-Allow-Origin作为标题。为了允许所有人（您可能不应该这样做）：

访问控制允许来源：*

Answer 2

如Postman中的POST请求正文所示，当使用axios发送HTTP请求时，您错过了user字段名称。该代码应为：

axios
.post("http://localhost:8000/api/users", {
  user: {
    email: this.state.email,
    password: this.state.password
  }
})

Answer 3

有两种方法： -您必须在服务器上启用cors 要么 -您可以在前端使用代理

Answer 4

在使用此类方案时，您需要考虑一些事项。

在package.json（前端）上设置代理设置

“代理”：“ http://localhost:8000”，
从服务器端启用CORS。
仅使用前端的结束URL（例如/ users），而不使用整个URL。

这可能会解决您的问题。

从本地客户端调用本地API

4 个答案: