私は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」ヘッダーを試しましたが、どれも機能しませんでした。
私が見逃しているのは簡単なことだと思います。私は何時間もこれにこだわっています。助けてください。
これは、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]'
}
正常に動作するはずです。
ところで、私はそれが郵便配達で働いていると思います:
また、 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
のようにする必要があります。または、機能しない場合は、そのヘッダーを含めないでください。
ブラウザーは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では許可されていません。
あなたの問題に対する可能な解決策:
バックエンドAPIへのアクセス権がある場合は、サーバーに「Access-Control-Allow-Origin」ヘッダーを設定して、アプリにAPIへのアクセスを許可することができます。ただし、画像サーバーへのアクセス権がないため、おそらく可能です。それをしなさい。
ブラウザでCORSを無効にします-次のようなプラグインを使用できます: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en 。この回避策は、開発には問題ないはずです。プラグインはCORS設定を無効にし、imgur apiにアクセスできるようになります。
3番目のソリューションは、プロキシを使用することです。 Expressを使用して小さなノードサーバーをセットアップできます。次に、独自のノードサーバーにアクセスし、次にそれがimgur apiにアクセスします。ノードサーバーはブラウザー環境ではないため、CORSの問題は発生せず、その方法でimgur APIにアクセスできます。これは、問題なくPostmanからAPIにアクセスできた理由でもあります。 Postmanはブラウザー環境ではないため、CORSポリシーによる制限はありません。