React Native fetch request to Microsoft Azure 失败

Question

我正在尝试将找到的 Microsoft Azure OCR API here 用于 React Native 应用程序。

我可以使用 Postman 让 API 在本地图像上正常工作，但由于某种原因，当我尝试在我的应用中使用 fetch 时，我得到了“不支持的媒体类型”。

我最初用这个代码调用了 api：

_analyzeImage = () => {
    const { image } = this.state;
    const url = 'https://westcentralus.api.cognitive.microsoft.com/vision/v1.0/ocr';
    const data = new FormData();
    data.append(image);
    fetch(url, {
        method: 'post',
        body: data,
        headers: {
            'Ocp-Apim-Subscription-Key': '***********************',
        }
    }).then(res => {
        console.log(res)
    });
}

image 的样子：

当使用 XCode 模拟器运行时，产生：

然后回应：

{
  "code":"UnsupportedMediaType",
  "requestId":"6ff43374-e5f9-4992-9657-82ec1e95b238",
  "message": "Supported media types: application/octet-stream, multipart/form-data or application/json"
}

奇怪的是，content-type 似乎是 test/plain。因此，即使我认为 FormData 对象应该处理内容类型，我尝试添加 'content-type': 'multipart/form-data'，但得到了相同的响应（尽管网络检查器中的 content-type 标头确实更改为 multipart/form-data。

我使用create-react-native-app 设置项目，并希望在 iOS 和 android 上工作。如果有人有任何想法 - 或任何其他方式进行 OCR，如果有更好的本地解决方案 - 我将不胜感激！

Answer 1

如doc page you link to中所述，如果您发送

application/json，您的有效负载必须如下所示：

{"url": "http://example.com/images/test.jpg"}

如果应用程序/八位字节流，

[Binary image data]

如果 multipart/form-data，

[Binary image data]

现在你没有发送任何符合预期的东西。

POST 示例

图片，

通过 URL 传递图像：

$ curl -v -X POST -H 'Ocp-Apim-Subscription-Key: 2exxxxxxxxxxxxxxxxxxxxxx' \
                  -H 'Content-type: application/json' \
                  --data-ascii '{ "url": "https://i.stack.imgur.com/RM7B3.png" }' \
                  https://westus.api.cognitive.microsoft.com/vision/v1.0/ocr

> POST /vision/v1.0/ocr HTTP/1.1
> Content-type: application/json
> Content-Length: 44
...

< HTTP/1.1 200 OK
< Content-Length: 196
< Content-Type: application/json; charset=utf-8

{
  "language": "en",
  ...
  "regions": [
    {
    ...
          "words": [
            {
              "boundingBox": "61,49,303,108",
              "text": "hello."
            }
    ...

或通过原始字节传递图像：

$ curl -v -X POST -H 'Ocp-Apim-Subscription-Key: 2exxxxxxxxxxxxxxxxxxxxxx' \
                  -H 'Content-type: application/octet-stream' \
                  --data-binary @hello.png \
                  https://westus.api.cognitive.microsoft.com/vision/v1.0/ocr

> POST /vision/v1.0/ocr HTTP/1.1
> Content-type: application/octet-stream
> Content-Length: 11623
...

< HTTP/1.1 200 OK
< Content-Length: 196
< Content-Type: application/json; charset=utf-8

{
  "language": "en",
  ...
  "regions": [
    {
    ...
          "words": [
            {
              "boundingBox": "61,49,303,108",
              "text": "hello."
            }
    ...