[解決済み] プリフライト要求に対する応答がアクセス制御チェックを通過しない

質問

Amazon Web Services上のREST APIを呼び出すためにngResourceを使用すると、このエラーが発生します。

XMLHttpRequest を読み込むことができません。 http://server.apiurl.com:8000/s/login?login=facebook . に対する応答 preflight リクエストがアクセス制御チェックを通過しません。いいえ 要求されたヘッダーに '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を使用しています。この問題を解決するために、他に何をしたらよいのかわかりません。オリジンからのヘッダーを受け入れるようにサーバーを設定したこともあります。 localhost .

解決方法は？

CORSの問題に遭遇している。

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

1. CORSをオフにする。例えば クロームでCORをオフにする方法
2. お使いのブラウザのプラグインを使用する
3. nginxなどのプロキシを使用する。 設定例
4. サーバーに必要な設定を行ってください。これは、EC2インスタンスにロードされているWebサーバーの要因です（これはあなたが"Amazon web service"によって意味するものと仮定しています）。あなたの特定のサーバーのために、あなたは以下を参照することができます。 有効なCORSのウェブサイト。

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

プロキシを使うことで、ブラウザはすべてのリクエストがローカルホストから来たと思い、実際にはローカルサーバーがリモートサーバーを呼び出すことになるのです。

api.serverurl.com が localhost:8000/api になり、ローカルの nginx や他のプロキシが正しい宛先に送信するようになるかもしれません。

ご好評につき、追加しました。 100%以上のCORS情報 ......味は同じ!

CORSを回避することは、単にフロントエンドを学習する人のために表示されるものです。 https://codecraft.tv/courses/angular/http/http-with-promises/