React 表单传递 headers 到 api

Question

我想从 React 表单 post JSON 到外部 api。 api 需要 headers（用户名：密码）才能访问它。我想看看如何设置一个表单来获取用户的输入并将其作为 headers 传递给 api 然后 post 一些 json。我可以用 cURL 做到这一点，但我对反应还比较陌生，这给我带来了一些问题。

Answer 1

如果您使用 fetch 进行 API 调用，您可以执行以下操作：

function signIn(username, password, body) {
    const options = {
        method: method,
        headers: new Headers({username, password}),
        mode: 'no-cors'
    };

    options.body = JSON.stringify(body);

    fetch(url, options)
    .then(response => response.json())
    .then(data => console.log(data));
}

您可能想阅读更多关于相同的内容 here

Answer 2

0

fetch(your_url,a_json_object) 在这里，json_object 有一个元素叫做 headers，只需在其中使用您自定义的 header。但是大多数菜鸟忘记在 backend.I 中添加 header 我展示了一个正确的例子：

前端：

fetch('fdf.api/getid',{ 
method:'post',
headers:{"a_custom_header":"custom_value"}
})

后端：

const express = require('express') 
const app = express()

app.use(function(req,res,next){ 
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, 
       PUT,PATCH, DELETE');

  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,a_custom_header'); //notice here carefully

  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
 })

React 表单传递 headers 到 api

React form pass headers to api

javascript

api

post

reactjs

jira-rest-api