相关疑难解决方法(0)

我正在尝试通过发布请求向 api 发送一些数据。

前端代码（反应）

handleSubmit = e => {
    e.preventDefault();
    fetch("http://localhost:9000", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title: this.state.title,
        text: this.state.text
      })
    });
  };

服务器（快递）

var urlencodedParser = bodyParser.urlencoded({ extended: false });
app.post("/", urlencodedParser, function(req, res) {
  sql = "INSERT INTO POSTS (id, title, text) VALUES ?";
  var values = [[uuidv1().toString(), req.body.title, req.body.text]];
  con.query(sql, [values], function(err, result, fields) {
    if (err) throw err;
  });
});

当我提交表单时，我从开发人员控制台收到此错误消息

我正在运行客户端localhost:3000和服务器端localhost:9000。有人可以让我知道这个问题是如何发生的，我该如何解决？

问题

https://api.instagram.com/oauth/access_token从我们的后端向（此处的步骤 2）发出 post 请求会导致 400 Bad Request，而没有任何其他信息。

我们始终能够使用 cURL 请求并在 iOS 模拟器上使用 fetch 访问 API 来获得成功的响应，但节点请求失败。我们现在已经尝试了几个请求库，包括request、node-fetch和axios，它们都显示相同的响应状态和错误消息。

成功的 cURL 请求

这是成功运行的 cURL（忽略敏感数据）：

curl -X POST \
  https://api.instagram.com/oauth/access_token \
  -H 'Accept: */*' \
  -H 'Cache-Control: no-cache' \
  -H 'Connection: keep-alive' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -H 'Host: api.instagram.com' \
  -H 'Postman-Token: ${myPostmanToken} ' \
  -H 'User-Agent: PostmanRuntime/7.11.0' \
  -H 'accept-encoding: gzip, deflate' \
  -H 'cache-control: no-cache' \
  -H 'content-length: 403' \
  -H …

我想在客户端应用程序中实现授权，但在使用 Keycloak 的 React 应用程序中更新令牌时遇到问题。

应用程序.js

import keycloak from "../../keycloak";

const App = () => {

    const handleOnEvent = async (event,error) => {
        if(event === 'onTokenExpired'){
            
            keycloak.updateToken(300).then(
                (response) => {
                   //I want to update my existing Token
                 alert("response: ", response )
                })
                .catch(error => {
                    console.log("error: ", error)
                })
        }
    }


    return (
        <>
            <ReactKeycloakProvider
                authClient={keycloak}
                onEvent={(event,error) => handleOnEvent(event,error)}>
                <AppRouter/>
            </ReactKeycloakProvider>
        </>)
}
export default App;

标头

const Header = () => {
    const {keycloak,initialized} = useKeycloak()

    useEffect(() => { …

我想_boundry在我的标题中设置。

首先，我发送表单数据：

//component.js

const form = new FormData();

form.append('email', 'eray@serviceUser.com')
form.append('password', '12121212')

dispatch(FetchLogin.action(form))

其次，我准备api调用；

//loginService.js

import api from '@/Services'

export default async form => {
  const response = await api.post('user/login/', form)
  return response.data
}

第三，我进行api调用；

//Services/index.js

import axios from 'axios'
import { Config } from '@/Config'

const instance =  axios.create({
  baseURL: Config.API_URL,
  headers: {
    'Content-Type': `multipart/form-data; boundary=${form._boundary}`, //Cannot access form here
  }, 
  timeout: 3000,
})

instance.interceptors.response.use(
  response => response,
  ({ message, response: { data, status } }) => …

我写了一个JS函数来发布categoryId和shopId,将page:0发布到api,这是我的功能: -

 getInsideMenu(categoryid,shopid){
        var formBody = [];
        var details={
             'categoryId':categoryid,
             'shopId':shopid ,
             'page':'0'
        };
        for (var property in details) {
              var encodedKey = encodeURIComponent(property);
              var encodedValue = encodeURIComponent(details[property]);
              formBody.push(encodedKey + "=" + encodedValue);
        }
                return fetch(
            `${serverAddress}/api/shopProducts`,
            {
                method: 'POST',
                body: formBody,
                headers: {
                   'Content-Type': 'application/x-www-form-urlencoded'
                }
            }
        ).then((res)=>(res.json()))
    },

但是我得到了null.我想这个函数没有正确定义.可以做些什么来解决它.它在POSTMAN中运行良好.[![这是邮递员如何发送] [1]] [1]

以下面的 Axios 为例：

axios.post(this.reportURL, reportData, {
  params: {
    param1: paramValue1,
    param2: paramValue2
  },
});

如何使用 fetch API 做同样的事情？我看到参数是这样完成的：

fetch(this.reportURL, {
  method: "POST",
  body: "param1=paramValue1&param2=paramValue2",
  headers: 
    {
      "Content-Type": "application/x-www-form-urlencoded"
    }

})

由于 body 键用于存储参数，我是否需要序列化我的整个 reportData 对象并将其连接到现有参数？

我不明白为什么 Fetch API 使用 body 键作为参数。

此外，这不是我自己的 API，我无法更改预期的 POST 请求。