对Microsoft Azure响应本机获取请求失败 [英] React Native fetch request to Microsoft Azure failing

问题描述

我正尝试使用找到的Microsoft Azure OCR API 此处用于React Native应用.

I'm trying to use the Microsoft Azure OCR API found here for a React Native app.

我可以使用Postman使API在本地图像上正常工作，但是由于某些原因，当我尝试在应用程序中使用fetch时，会得到不受支持的媒体类型".

I can get the API to work fine on local images with Postman, but for some reason, I get an "Unsupported Media Type" when I try using fetch within my app.

我最初使用以下代码调用api:

I originally called the api with this code:

_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模拟器运行时，会产生:

That, when ran using the XCode simulator, yields:

响应:

{
  "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.

Weirdly, the content-type seemed to be test/plain. So, even though I thought that the FormData object was supposed to take care of content type, I tried adding 'content-type': 'multipart/form-data', but got the same response (although the content-type header in the network inspector did change to multipart/form-data.

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

I used create-react-native-app to set up the project, and want to to work on iOS and android. If anyone has any ideas - or any other ways to do OCR, if there's a better native solution - I'd appreciate it!

推荐答案

如您链接到的文档页面(如果发送

application/json ，您的有效载荷必须如下所示:

application/json, your payload must look like this:

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

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

[Binary image data]

如果多部分/表单数据，

[Binary image data]

目前，您没有发送符合期望的任何内容.

Right now you're not sending anything that matches expectations.

图片

通过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."
            }
    ...

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

or pass image by raw bytes:

$ 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."
            }
    ...

这篇关于对Microsoft Azure响应本机获取请求失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！