2017-09-22 10 views
2

ReactJSでアプリケーションのクライアント側を書いていますが、特定のAPIからデータを取得しようとしています。 "No" Access-Control-Allow-Origin 'ヘッダーが要求されたリソースに存在します。起源' http://localhost:3000 'はアクセス不可のエラーです。 CORSを有効にするためにサーバーに「Access-Control-Allow-Origin」ヘッダーがないものと思われますが、なぜ私が理解できないのは、「Restlet Client - REST API」でAJAX呼び出しを行うときですテスト "ブラウザの拡張機能は実際に動作します。私は次の成功の応答を得る。しかし、それは私の実際のリアクションリクエストの中では機能しません。サーバー側の変更なしにこのエラーを取り除く方法はありますか?この拡張機能が実際に機能するのはなぜですか?CORSの「Access-Control-Allow-Origin」ヘッダーが表示されない問題

Connection: keep-alive 
Content-Type: application/json; charset=UTF-8; 
Date: 
2017 Sep 22 22:45:40-1m 50s 
Server: ..../1.6.2 
Transfer-Encoding: chunked 
Accept: */* 
Accept-Encoding: gzip, deflate, br 
Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4 
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36 

は私が応答

componentWillMount() { 
    const url = "https://myserver.ru/api/issue?perPage=10"; 
    Request.get(url).then((response) => { 
     this.setState({ 
     issues: response 
    }); 
    }); 
    } 

答えて

0

を得ている場合は、ちょうどあなたがクロスサイト・リクエストを行っている場合は、ブラウザがサーバーからAccess-Control-Allow-Originヘッダを期待してテストし、そこにコードが、何も特別な反応しマイ。あなたがローカルホストから要求している場合はそのヘッダの値にすることができ、

Access-Control-Allow-Origin: * 

または

Access-Control-Allow-Origin: http://localhost:3000 

は、必ずそれはまた、同様に、ポート番号を追加する必要があります。

CORSのドキュメントについての詳細:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

はそれがお役に立てば幸いです。

+2

答えをいただきありがとうございます。その部分は私にとっては明らかです。私はブラウザの拡張機能が実際にCORSなしでサーバからの成功応答を得ることができる理由を理解できませんか? –

関連する問題