在 React Native 中获取不发送正文答案

【问题标题】：fetch not sending body in React Native在 React Native 中获取不发送正文
【发布时间】：2020-07-29 22:56:51
【问题描述】：

我正在尝试从 react 本机应用程序将一些 JSON 发布到本地网络上的端点，但它似乎实际上并没有发布正文。

    fetch( 'http://192.168.4.1/access-points', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify( {
            ssid: 'SSIDNAME',
            password: 'SSIDPASSWORD',
        } ),
    } );

它可以到达端点，使用正确的方法和内容类型，但是找不到正文。

以下是当我从 react 本机应用程序发出请求时端点似乎收到的内容。

POST /access-points HTTP/1.1
Host: 192.168.4.1
Content-Type: application/json
Connection: keep-alive
Accept: */*
User-Agent: Hame/1 CFNetwork/808.2.16 Darwin/15.6.0
Content-Length: 45
Accept-Language: en-us
Accept-Encoding: gzip, deflate

当我使用Paw 发出请求时，我得到的就是这个

POST /access-points HTTP/1.1
Content-Type: application/json; charset=utf-8
Host: 192.168.4.1
Connection: close
User-Agent: Paw/3.0.16 (Macintosh; OS X/10.11.6) GCDHTTPRequest
Content-Length: 45

{"ssid":"SSIDNAME","password":"SSIDPASSWORD"}

如您所见，两者都报告了正确的Content-Length

【问题讨论】：

什么是“Hame/1 CFNetwork/808.2.16 Darwin/15.6.0”？网络浏览器？是否在其他浏览器中尝试过请求？
不，这是来自 react native 应用程序。 “Hame”是我正在制作的应用程序的名称。

标签： react-native fetch-api

【解决方案1】：

我遇到了类似的问题——Spring Boot 服务可以正常接收来自 Postman 的 POST 正文，但收到来自我的 React 应用程序的调用时没有正文和 Content-Length 的 -1。

经过一番打猎，我遇到了https://github.com/github/fetch/issues/318#issuecomment-335086509。这使我了解了有关 CORS 的更多信息，并将以下内容添加到我的 Spring Boot 应用程序的 @RestController 类中：

@CrossOrigin(origins = WHITELISTED_AUTHORITY)

或者，React 客户端 fetch 调用可以有：

    headers: {
      Origin: AUTHORITY,
    }

从服务器设置它会请求客户端发送该信息，从而减少客户端程序员必须做的一件事，但它可以（我不知道这一切如何工作得足够深入以确保 - 那些做，请编辑此答案）导致客户端和服务器之间的往返次数更多。

【讨论】：

【解决方案2】：

我有同样的问题，然后我检查了request.form和request.data，我发现body被发送到request.data，所以request.form返回None

因此解决方案是将 request.form 更改为 request.data 或更改 fetch 选项以将正文发送到 request.form

如果要将正文发送到 request.form，请设置标头：

'Accept': 'application/json',
'Content-Type': 'multipart/form-data'

比如数据是

const data = {
    ssid: 'SSIDNAME',
    password: 'SSIDPASSWORD',
}

然后创建表单数据：

const formData = new FormData();
for (key in data) {
    formData.append(key, data[key]);
}

获取将是：

fetch(url, {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'multipart/form-data'
    },
    body: formData
})

【讨论】：