☰

プリフライトリクエストへの応答がアクセス制御チェックに合格しない - 'Access-Control-Allow-Origin' ヘッダーがありません 質問する

tag-icon • tag-icon javascript ajax http cors http-status-code-405
プリフライトリクエストへの応答がアクセス制御チェックに合格しない - 'Access-Control-Allow-Origin' ヘッダーがありません 質問する

ngResourceを使用して呼び出すと、このエラーが発生します。休むAPIオンアマゾンウェブサービス:

XMLHttpRequest を読み込めませんhttp://server.apiurl.com:8000/s/login?login=facebookプリフライト リクエストへの応答がアクセス制御チェックに合格しません: 要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。したがって、オリジン 'http://localhost' はアクセスを許可されません。エラー 405

サービス：

socialMarkt.factory('loginService', ['$resource', function ($resource) {
    var apiAddress = "http://server.apiurl.com:8000/s/login/";
    return $resource(apiAddress, {
        login: "facebook",
        access_token: "@access_token",
        facebook_id: "@facebook_id"
    }, {
        getUser: {
            method: 'POST'
        }
    });
}]);

コントローラ：

[...]
loginService.getUser(JSON.stringify(fbObj)),
    function (data) {
        console.log(data);
    },
    function (result) {
        console.error('Error', result.status);
    }
[...]

Chrome を使用しています。この問題を解決するために他に何ができるでしょうか?

origin からのヘッダーを受け入れるようにサーバーを構成しましたlocalhost。

ベストアンサー1

あなたは遭遇していますCORS問題。

これを修正または回避する方法はいくつかあります。

  1. CORS をオフにします。例:Chrome で CORS をオフにする方法
  2. ブラウザのプラグインを使用する
  3. プロキシを使用する。nginx。設定方法の例
  4. サーバーに必要な設定を行ってください。これは、お使いのコンピュータにロードしたウェブサーバーの要因です。EC2インスタンス（これが「Amazon Webサービス」の意味であると仮定します）。特定のサーバーについては、CORS ウェブサイトを有効にします。

もっと詳しく言うと、 api.serverurl.comにアクセスしようとしているのはローカルホストこれはクロスドメイン リクエストの正確な定義です。

作業を完了するためだけにこれをオフにするか (ただし、他のサイトにアクセスして問題を先送りするとセキュリティが低下します)、またはプロキシを使用して、実際にはローカル サーバーがあり、そこからリモート サーバーが呼び出されているにもかかわらず、すべてのリクエストがローカル ホストから送信されたとブラウザーが認識するようにすることができます。

したがって、api.serverurl.com はlocalhost:8000/apiになり、ローカルの nginx またはその他のプロキシは正しい宛先に送信します。

今では多くの要望により、CORS 情報が 100% 増加—同じ素晴らしい味！

CORS をバイパスすることは、フロントエンドを学習するだけの人向けに示されているとおりです。Promise を使用した HTTP の例

おすすめ記事