Ruby on rails 在reactjs中请求Axios失败，本地使用Rails 6 API

我在

reactjs

中使用

axios

，它在端口3000上运行&

rails6

API应用程序在3001上运行

我点击了

/authenticate POST

API并在浏览器网络选项卡中检查了

xhr

选项卡，发现状态为

（已取消）

，没有响应或错误

在

rails

log上

Started POST "/api/v1/authenticate" for ::1 at 2020-09-04 09:56:49 +0530
Processing by Api::V1::AuthenticationController#authenticate as HTML
  Parameters: {"email"=>"example@mail.com", "password"=>"[FILTERED]", "authentication"=>{"email"=>"example@mail.com", "password"=>"[FILTERED]"}}

请说明我做错了什么

我的

axios

调用如下所示

  const response = await axios({
    URL: "http://localhost:3001/api/v1/authenticate",
    method: "POST",
    data: {"email":"example@mail.com","password":"123123123"},
    headers: { 'Content-Type': 'application/json' }
  });

我跟着，但没有工作

src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    '/api/v1',
    createProxyMiddleware({
      target: 'http://localhost:3001/',
      changeOrigin: true,
    })
  );
};

API在响应

json

data中的返回标记如下所示：

curl -H "Content-Type: application/json" -X POST -d '{"email":"example@mail.com","password":"123123123"}' http://localhost:3001/api/v1/authenticate

---

我不确定您是否在使用Desive，但我使用了JWT的敲打，它有一个讨厌的习惯，即要求

数据

包含

auth

，如下所示：

const response=wait axios({
URL:“http://localhost:3001/api/v1/authenticate",
方法：“张贴”，
数据：{“授权”：{“电子邮件”：”example@mail.com，“密码”：“123123”}，
标题：{'Content Type'：'application/json'，'Accept'：'application/json'}
});

而designe需要额外的头

Accept:application/json

请参阅此处->

---

不知道这是否回答了您的问题。

我将删除一个问题，因为它是前端的一个愚蠢错误。Axios调用被取消，因为有一个按钮元素在其上通过

onClick

事件被调用，其type=“submit”最终触发表单提交。因此，我必须更改类型。如果您没有在标题中提供

Accept

，它将假定它是

HTML

类型，并且对于此请求，API可以呈现JSON数据。