web-dev-qa-db-ja.com

'Access-Control-Allow-Origin'ヘッダーに複数の値が含まれています

クライアントサイドでAngularJS $ httpを使用して、サーバーサイドのASP.NET Web APIアプリケーションのエンドポイントにアクセスしています。クライアントはサーバーとは異なるドメインでホストされているので、CORSが必要です。 $ http.post（url、data）に対応しています。しかし、私がユーザーを認証して$ http.get（url）でリクエストをするとすぐに、私はメッセージを受け取ります

 'Access-Control-Allow-Origin'ヘッダーには複数の値 'http://127.0.0.1:9000、http://127.0.0.1:9000'が含まれていますが、許可されるのは1つだけです。したがって、オリジン 'http://127.0.0.1:9000'はアクセスを許可されていません。

Fiddlerは、オプションの要求が成功した後に、get要求に実際には2つのヘッダーエントリがあることを私に示しています。何がどこでどこで私が間違っているのですか？

更新

$ http.getの代わりにjQuery $ .getを使用すると、同じエラーメッセージが表示されます。だからAngularJSではこれは問題ないようです。しかし、どこが悪いのでしょうか。

asp.net-web-apicorsangularjs-http
89
Papa Mufflon

追加した

config.EnableCors(new EnableCorsAttribute(Properties.Settings.Default.Cors, "", ""))

と同様

app.UseCors(CorsOptions.AllowAll);

サーバー上。これにより、2つのヘッダーエントリができます。後者を使うだけでうまくいきます。

50
Papa Mufflon

ベストプラクティスに従ってCORSを設定したため、この問題に遭遇しました（例： http://www.asp.net/web-api/overview/security/enabling-cross-Origin-requests-in-web）。 -api ）またweb.configにカスタムヘッダー<add name="Access-Control-Allow-Origin" value="*"/>がありました。

Web.configエントリを削除すれば、すべて問題ありません。

@ mwwの答えとは反対に、WebApiConfig.csにはEnableCors()があり、コントローラにはEnableCorsAttributeがあります。どちらかを取り出すと、他の問題に出くわしました。

45
Brandon Kuczenski

Cors 5.1.0.0を使用していますが、頭痛の種の後、この問題がサーバーからのAccess-Control-Allow-OriginおよびAccess-Control-Allow-Headerヘッダーの重複であることがわかりました。

WebApiConfig.csファイルからconfig.EnableCors()を削除し、Controllerクラスの[EnableCors("*","*","*")]属性を設定するだけです。

詳しくは この記事 をご覧ください。

38
mww

実際には、複数のヘッダをAccess-Control-Allow-Originに設定することはできません（または少なくともすべてのブラウザで機能するわけではありません）。代わりに、環境変数を条件付きで設定して、それをHeaderディレクティブで使用することができます。

SetEnvIf Origin "^(https?://localhost|https://[a-z]+\.my\.base\.domain)$" Origin_SUB_DOMAIN=$1
Header set Access-Control-Allow-Origin: "%{Origin_SUB_DOMAIN}e" env=Origin_SUB_DOMAIN

したがって、この例では、応答ヘッダーは、要求ヘッダーOriginがRegExp：^(https?://localhost|https://[a-z]+\.my\.base\.domain)$（基本的にHTTPまたはHTTPS上のlocalhostおよびHTTPS上の* .my.base.domain）に一致する場合にのみ追加されます。

setenvifモジュールを必ず有効にしてください。

ドキュメント：

ところで。 }eの%{Origin_SUB_DOMAIN}eはタイプミスではありません。 Headerディレクティブで環境変数をどのように使用するかです。

7
Nux

私もOWINと私のWebAPIの両方を持っていて、どちらも明らかにCORSを有効にする必要があるため、'Access-Control-Allow-Origin' header contains multiple valuesエラーが発生しました。

CORSを有効にしているすべてのコードを削除してから、私のWeb.Configのsystem.webServerノードに次のコードを追加しました。

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="https://stethio.azurewebsites.net" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Authorization" />
  </customHeaders>
</httpProtocol>

これを実行すると、OWIN（ログインを許可）およびWebAPI（API呼び出しを許可）のCORS要件が満たされましたが、新しい問題が発生しました。私のAPI呼び出しのプリフライト中にOPTIONSメソッドが見つかりませんでした。それに対する修正は簡単でした - 私はちょうど私のWeb.Configのhandlersノードから以下を削除する必要がありました：

<remove name="OPTIONSVerbHandler" />

これが誰かに役立つことを願っています。

7
Matt Cashatt

Apacheサーバ：

私は同じことを使います、それは私が私のファイルの中に引用符（ "）を持っていなかったからです、例えば、 '。htaccess。'：

Header add Access-Control-Allow-Origin: * 
Header add Access-Control-Allow-Origin "*"

他の '.htaccess'と一緒に '。htaccess'というファイルがあるフォルダにあるかもしれません。

/ 
- .htaccess 
- public_html / .htaccess (problem here)

あなたのケースでは '*'の代わりにアスタリスクがあなたがデータを提供する許可を与えるip（http://127.0.0.1:9000）サーバーになるでしょう。

ASP.NET:

コードに 'Access-Control-Allow-Origin'が重複していないことを確認してください。

開発者ツール

Chromeでは、リクエストヘッダを確認できます。 F12キーを押して[ネットワーク]タブに移動し、AJAXリクエストを実行します。リストに表示されます。をクリックして、すべての情報を入力します。

Access-Control-Allow-Origin: *

5
Chofoteddy

これは、Corsオプションが複数の場所に設定されている場合に発生します。私の場合は、Startup.Auth.cs/ConfigureAuthだけでなくコントローラレベルでも持っていました。

私が理解しているのは、アプリケーション全体に適用する場合は、Startup.Auth.cs/ConfigureAuthのように設定するだけです。Microsoft.Owin.Corsを参照する必要があります。

public void ConfigureAuth(IAppBuilder app)
        {
          app.UseCors(CorsOptions.AllowAll);

あなたがむしろコントローラーレベルでそれを保つならば、あなたはちょうどコントローラーレベルで挿入することができます。

[EnableCors("http://localhost:24589", "*", "*")]
    public class ProductsController : ApiController
    {
        ProductRepository _prodRepo;
4
Nizar

IISにいる場合は、web.configでCORSを有効にする必要があります。App_Start/ WebApiConfig.csで有効にする必要はありません。

私の解決策は、次の行をコメントしたことです。

// Enable CORS
//EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
//config.EnableCors(cors);

そしてweb.configに書いてください：

<system.webServer>
  <httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>
2
freedeveloper

登録に追加

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

またはweb.config

<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
<add name="Access-Control-Allow-Credentials" value="true" />
</customHeaders>  
</httpProtocol>

しかし両方ではない

2
tfa

nodejsサーバーでこの問題が発生しました。

ここで私はそれを修正した方法です。
私は自分のノードサーバーをnginx proxyで実行し、nginxとnodeを両方のallow cross domain requestsに設定しました。

1
James Harrington

もちろん、実際にAccess-Control-Allow-Originヘッダーに複数の値を設定した場合にも発生する可能性があります。たとえば、値のコンマ区切りリストは RFCでサポートされている種類 ですが、実際、ほとんどの主要なブラウザではサポートされていません。 RFCは複数のドメインを許可する方法について説明しています に「*」も使用しないことに注意してください。

たとえば、次のようなヘッダーを使用すると、Chromeでそのエラーを取得できます。

Access-Control-Allow-Origin: http://test.mysite.com, http://test2.mysite.com

これはChrome Version 64.0.3282.186 (Official Build) (64-bit)にありました

CDNが原因でこれを検討していて、Akamaiを使用している場合は、 使用する場合、AkamaiはサーバーにキャッシュしないVary:Origin、多くのことを示唆していることに注意してください。この問題を解決するために。

「キャッシュIDの変更」応答動作を使用して、キャッシュキーの作成方法を変更する必要があります。詳細 この関連するStackOverflowの質問のこの問題の詳細

1
Brad Parks

とてもばかげて簡単

この問題は私のApache設定ファイルの中にHeader always set Access-Control-Allow-Origin *が2回あるときに起こりました。 VirtualHostタグを使用した後とLimitタグを使用した後

<VirtualHost localhost:80>
  ...
  Header set Access-Control-Allow-Origin: *
  ...
  <Limit OPTIONS>
    ...
    Header set Access-Control-Allow-Origin: *
    ...
  </Limit>
</VirtualHost>

エントリを1つ削除すると問題が解決しました。

元の記事では、2回だったと思います。

Header set Access-Control-Allow-Origin: "http://127.0.0.1:9000"
0
Wilt

私は同じ問題に直面しました、そして、これは私がそれを解決するためにしたことです：

Global.asax内のWebApiサービスで、次のコードを書きました。

Sub Application_BeginRequest()
        Dim currentRequest = HttpContext.Current.Request
        Dim currentResponse = HttpContext.Current.Response

        Dim currentOriginValue As String = String.Empty
        Dim currentHostValue As String = String.Empty

        Dim currentRequestOrigin = currentRequest.Headers("Origin")
        Dim currentRequestHost = currentRequest.Headers("Host")

        Dim currentRequestHeaders = currentRequest.Headers("Access-Control-Request-Headers")
        Dim currentRequestMethod = currentRequest.Headers("Access-Control-Request-Method")

        If currentRequestOrigin IsNot Nothing Then
            currentOriginValue = currentRequestOrigin
        End If

        If currentRequest.Path.ToLower().IndexOf("token") > -1 Or Request.HttpMethod = "OPTIONS" Then
            currentResponse.Headers.Remove("Access-Control-Allow-Origin")
            currentResponse.AppendHeader("Access-Control-Allow-Origin", "*")
        End If

        For Each key In Request.Headers.AllKeys
            If key = "Origin" AndAlso Request.HttpMethod = "OPTIONS" Then
                currentResponse.AppendHeader("Access-Control-Allow-Credentials", "true")
                currentResponse.AppendHeader("Access-Control-Allow-Methods", currentRequestMethod)
                currentResponse.AppendHeader("Access-Control-Allow-Headers", If(currentRequestHeaders, "GET,POST,PUT,DELETE,OPTIONS"))
                currentResponse.StatusCode = 200
                currentResponse.End()
            End If
        Next

    End Sub

ここでは、このコードは飛行前およびトークン要求が応答に "Access-Control-Allow-Origin"を追加することのみを許可します。それ以外の場合は追加しません。

これが私の実装に関するブログです。 https://ibhowmick.wordpress.com/2018/09/21/cross-domain-token-based-authentication-with-web-api2-and-jquery-angular -5-Angular-6 /

0
indranil bhowmick

phpでIISを使用している場合は、IIS itサーバー側でweb.configファイルにルートディレクトリ（wwwroot）を追加し、これを追加します。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <directoryBrowse enabled="true" />
        <httpProtocol>
            <customHeaders>
                <add name="Control-Allow-Origin" value="*"/>
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

そのあと、IIS serverを再起動し、RUNにIISResetと入力して次のように入力します。

0
user889030

上記の例と同様に、CORSの場所を定義する設定ファイルは1つだけです。別のディレクトリのパス上のIISサーバーに2つのweb.configファイルがあり、そのうちの1つが非表示になっています。仮想ディレクトリこの問題を解決するために、パスが仮想ディレクトリ内の設定ファイルを使用していたため、ルートレベルの設定ファイルを削除しました。どちらかを選択する必要があります。

URL called:  'https://example.com/foo/bar'
                     ^              ^
      CORS config file in root      virtual directory with another CORS config file
          deleted this config             other sites using this
0
Cliff Coulter