web-dev-qa-db-ja.com

外部APIにPOSTするとCORSがスローされますが、Postmanから機能します

私はi mgur apiを使用して画像をアップロードします ノードjsアプリを使用しています。

画像をbase64文字列に変換し、Postman経由で送信するとうまくいきます。

私が使う node-fetchはAPI呼び出しを行います。

const fetch = require('node-fetch')
...
async uploadImage(base64image) {
        try {
            const url = 'https://api.imgur.com/3/image'
            const res = await fetch(url,
                {
                    method: 'POST',
                    body: { image: base64image },
                    headers: {
                        'content-type': 'application/json',
                        'Authorization': 'Client-ID [my-client-id]',
                        'Access-Control-Allow-Headers': 'Content-Type, Authorization, Access-Control-Allow-Headers',
                        'Access-Control-Allow-Methods': 'POST',
                    }
                }
            )

            console.log(res)
        } catch(err) {
            console.log(err)
        }
    }

エラー： ' https://api.imgur.com/3/image 'でOriginからフェッチするためのアクセス '- http：// localhost：30 'がCORSポリシーによってブロックされました：リクエストヘッダーフィールドAccess-Control-Allow-HeadersはプリフライトレスポンスのAccess-Control-Allow-Headersでは許可されていません。

多くの「Access-Control-Allow-xxx」ヘッダーを試しましたが、どれも機能しませんでした。

私が見逃しているのは簡単なことだと思います。私は何時間もこれにこだわっています。助けてください。

javascriptnode.jscorsimgurnode-fetch
4
Cristian G

これは、Access-Control-Allow-Headers、Access-Control-Allow-Methodsがサーバーで使用されるヘッダーであるためです。サーバーはミドルウェアによってヘッダーを追加します。

ここで、CORSが有効になっているサーバー（以下の例では高速サーバー）で、この種の（デフォルト）ヘッダーが設定されていることを想像してください。

app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, Accept');
});

そして、クライアント側からAccess-Control-Allow-Headersを送信すると、サーバーはそれをホワイトリストに登録されていないヘッダーと見なします。

したがって、ヘッダーではこれらを使用するだけです：

headers: {
    'content-type': 'application/json',
    'Authorization': 'Client-ID [my-client-id]'
}

正常に動作するはずです。

ところで、私はそれが郵便配達で働いていると思います：

  • その小さなpostmanキャプチャ拡張機能をインストールしないと、Postmanは特定のヘッダーを設定できません。
  • ブラウザのセキュリティは、Origin間のリクエストを停止します。 chromeセキュリティを無効にすると、CORSリクエストは問題なく実行されます。

また、 this によれば、

これはおそらくChromeがlocalhostをサポートしていないためAccess-Control-Allow-Originを通過できないためだと思います- Chromeを参照_問題

ヘッダーにChromeを送信Access-Control-Allow-Originするには、/ etc/hostsファイルのローカルホストに次のような他のドメインのエイリアスを設定します。

127.0.0.1   localhost yourdomain.com

次に、localhostではなくyourdomain.comを使用してスクリプトにアクセスする場合、呼び出しは成功するはずです。

注：コンテンツタイプをapplication/jsonにする必要はないと思います。image/jpegのようにする必要があります。または、機能しない場合は、そのヘッダーを含めないでください。

5
Aritra Chakraborty

ブラウザーはHTTPリクエストをWebページと同じドメインに制限するため、CORSの問題が発生しない限り、ブラウザーから直接imgur apiにアクセスすることはできません。

画像をbase64文字列に変換し、Postman経由で送信するとうまくいきます。

これは、Postmanがブラウザーではないため、CORSポリシーによって制限されないためです。

多くの「Access-Control-Allow-xxx」ヘッダーを試しましたが、どれも機能しませんでした。

これらのヘッダーは、サーバーからの応答で返される必要があります-あなたの場合は、imgurサーバーによって返されます。ブラウザからのリクエストでそれらを設定することはできないため、機能しません。

エラー： ' https://api.imgur.com/3/image 'でOriginからフェッチするためのアクセス ' http：// localhost：3000 'がCORSポリシーによってブロックされています：リクエストヘッダーフィールドAccess-Control-Allow-Headersは、プリフライトレスポンスのAccess-Control-Allow-Headersでは許可されていません。

あなたの問題に対する可能な解決策：

  1. バックエンドAPIへのアクセス権がある場合は、サーバーに「Access-Control-Allow-Origin」ヘッダーを設定して、アプリにAPIへのアクセスを許可することができます。ただし、画像サーバーへのアクセス権がないため、おそらく可能です。それをしなさい。

  2. ブラウザでCORSを無効にします-次のようなプラグインを使用できます： https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en 。この回避策は、開発には問題ないはずです。プラグインはCORS設定を無効にし、imgur apiにアクセスできるようになります。

  3. 3番目のソリューションは、プロキシを使用することです。 Expressを使用して小さなノードサーバーをセットアップできます。次に、独自のノードサーバーにアクセスし、次にそれがimgur apiにアクセスします。ノードサーバーはブラウザー環境ではないため、CORSの問題は発生せず、その方法でimgur APIにアクセスできます。これは、問題なくPostmanからAPIにアクセスできた理由でもあります。 Postmanはブラウザー環境ではないため、CORSポリシーによる制限はありません。

2
Jatin Gupta