こんにちは私はReactとaxiosを使用してコースをフェッチするUdemyAPIを構築しました。ChromeでCORS拡張機能がオンになっている場合は正常に機能しますが、それ以外の場合はデータをフェッチしません。
この問題についてはすでに質問しましたので、お読みください。私はオンラインで提供されるすべてのソリューションを試しました。ありがとう
関連する問題:リソースの読み込みに失敗しました。OriginはAccess-Control-Allow-Originで許可されていません
この問題は通常、バックエンドサーバーに関連していますが、サーバーにアクセスできない場合は、2つのオプションがあります
このChrome拡張機能を使用する最初のオプション:Allow-Control-Allow-Originですが、残念ながらこの拡張機能は他のブラウザでは使用できないため、使用する必要があります
次のようなオンラインCORSプロキシを使用する2番目のオプション
https://cors-anywhere.herokuapp.com/http://example.com
http://cors-proxy.htmldriven.com/?url=http://www.htmldriven.com/sample.json
CORSプロキシは、サードパーティサービスへの標準AJAXリクエストの実行に関連する同一生成元ポリシーをバイパスする必要がある開発者向けの無料サービスです。
CORSプロキシを使用したAxiox呼び出しの例を次に示します
const urlProxy = 'https://cors-anywhere.herokuapp.com/http://example.com';
export function post() {
let users = {
username: '',
password: '',
};
return axios({
method:'POST',
url:urlProxy,
data: users, // Delete it if you dont have a data
withCredentials: true, // Delete it if your request doesn't required credentials
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
'Origin': '*',
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Origin': '*',
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
}
withCredentials()
XHRリクエストにブラウザでCookieと認証ヘッダーを含めるように追加しました。サービスがCookie(セッションCookieを含む)に依存している場合、このオプションセットでのみ機能します。
2015年3月5日にリリースされた最新のFirefox(ビルド36.0.1)で動作するHTTP応答にCORSヘッダーを追加するFirefox拡張機能がありますこのリンクをチェックしてください
これがお役に立てば幸いです
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加