web-dev-qa-db-ja.com

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません+応答のHTTPステータスコード401

XMLHttpRequestをロードできません http://192.168.1.253:8080/ ...要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http：// localhost：42 'はアクセスを許可されていません。応答のHTTPステータスコード401。

かなり一般的なエラーで、機能しない非常に多くの可能な解決策があります。私はCORSがどのように機能するかを理解しています（私は思う）、そして私は私のHTTPヘッダーに何の問題も見ませんが、それはまだ機能しません

Chromeから：

Request URL:http://192.168.1.253:8080/...
Request Method:OPTIONS
Status Code:200 OK
Remote Address:192.168.1.253:8080
Referrer Policy:no-referrer-when-downgrade
Response Headers
Access-Control-Allow-Headers:x-requested-with,accept,content-
type,authorization
Access-Control-Allow-Methods:POST, GET, PUT, PATCH, OPTIONS, DELETE
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3600
Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Connection:keep-alive
Content-Length:0
Date:Mon, 15 May 2017 21:50:55 GMT
Expires:0
Pragma:no-cache
Server:...
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block
Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:authorization,content-type
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:192.168.1.253:8080
Origin:http://localhost:4200
Pragma:no-cache
Referer:http://localhost:4200/...
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

私の理解では、OPTIONS応答にはAccess-Control-Allow-Originヘッダーを設定し、メソッドタイプとヘッダー値を許可します。

関連するangular以下。私はこれをかなりの数のさまざまな組み合わせで、ヘッダーのさまざまな種類のものと組み合わせましたが、何も機能しません

private getObject<T>(path: string): Promise<T> {
    return this.http.get(SERVER_URL + path, this.authenticationToken())
        .toPromise()
        .then(response => response.json() as T)
        .catch(this.handleError);
}

private authenticationToken() : RequestOptions {
    let login = JSON.parse(sessionStorage.getItem('currentLogin'));
    if (login && login.authenticationToken) {
        let headers = new Headers({ 
            'Authorization': 'Basic ' + login.authenticationToken,
            'Content-type': 'application/json', 
          });
        return new RequestOptions({ headers: headers });
    }
}

私は明らかな何かを見逃していると感じましたが、それは私を夢中にさせています、どんな助けも感謝しています。これは既存のEmberアプリケーションで動作するので、サーバーだとは思わないことに注意してください。

javascriptangularcorspreflight
9
Lyle Rolleman

応答のHTTPステータスコード401。

401は認証エラーを示します。質問のエラーメッセージは、プリフライトOPTIONSリクエストからの応答ではありません。代わりに、送信しようとしている実際のGETリクエスト用のようです。

そのため、そのエラーメッセージに基づいて、ブラウザのプリフライトOPTIONSリクエストは成功したが、認証エラーによりGETリクエストが成功しなかったというシナリオが最も可能性が高いようです。

そのため、サーバーは401応答/エラーページを返します。また、多く/ほとんどのウェブサーバーは、エラーレスポンス/ページのAccess-Control-Allow-Originレスポンスヘッダーを送信するように設定されていません。そのため、ヘッダーが欠落しているというメッセージも表示されます。

ただし、エラー応答のヘッダーが見つからないことが問題の原因ではありません。代わりに、401があります。

そのため、サーバーが401応答を送信する原因、つまり認証エラーが発生する理由を把握する必要があるようです。修正すると、Access-Control-Allow-Origin応答ヘッダーを含むサーバーからの応答を期待どおりに受け取る可能性があります。

11
sideshowbarker

これは、AngularおよびIonicで作業するときに見られる典型的なエラーです。問題は、アプリのブラウザーに読み込まれたアプリがOriginローカルアドレスhttp://localhost:4200から来て、AJAXリクエストをlocalhost:4200リクエストは、Originとは異なる任意のポイントから呼び出され、[〜＃〜] cors [〜＃〜]（Cross Origin Resource Sharing）プリフライト要求は、リソースにアクセスできるかどうかを確認します。

ソリューションは、バックエンドへのプロキシを使用することです。これにより、特定のURLをハイジャックし、バックエンドサーバーに送信できます。実装は簡単です。

1.-プロジェクトのルートフォルダーにファイルproxy.conf.jsを作成します。

2.-新しいホストがproxy.conf.jsにあると仮定して、http://localhost:3000ファイル内にプロキシを設定します。

const PROXY_CONFIG = [
    {
        context: [
            "/my",
            "/many",
            "/endpoints",
            "/i",
            "/need",
            "/to",
            "/proxy"
        ],
        target: "http://localhost:3000",
        secure: false
    }
]

module.exports = PROXY_CONFIG;

3.- package.jsonファイルを変更して、この"start": "ng serve --proxy-config proxy.conf.js",を挿入します

4.-サービスで、リクエストのパスをこのhttp://localhost:3000/endpoints/any/path/that/you/useからこの../endpoints/any/path/that/you/useに少し変更します（別のホストがlocalhost:3000にあり、コンテキストが/endpointsであると仮定します） 。

5.- angularを実行：ルートフォルダーはnpm startなので、これはプロキシパラメーターでng serveを実行します。

これについてさらに情報が必要な場合は、 Proxy to backend Angular Cli documentation を確認してください。

9
havelino