web-dev-qa-db-ja.com

プリフライト要求への応答がアクセス制御チェックに合格しない

私はこのエラーをngResourceを使ってAmazon Web ServicesのREST AP​​Iを呼び出すことで得ています：

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からのヘッダを受け付けるようにサーバを設定しました。

javascriptajaxhttpcorshttp-status-code-405
295
Andre Mendes

CORSの問題が発生しています。

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

  1. CORSをオフにします。例： クロムでcorsをオフにする方法
  2. ブラウザにプラグインを使用
  3. Nginxなどのプロキシを使用します。 設定方法の例

さらに詳細には、localhostからapi.serverurl.comにアクセスしようとしています。これは、クロスドメインリクエストの正確な定義です。

作業を完了するためだけにオフにするか（OK、他のサイトにアクセスして缶を捨てる場合はセキュリティを低下させる）、プロキシを使用して、ブラウザがすべてのリクエストがローカルホストから来たと考えるようにすることができます。実際には、リモートサーバーを呼び出すローカルサーバーがあります。

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

今では人気の需要によって、 100％CORS情報 ....同じ素晴らしい味！

そして、ダウンボッターのために.... CORSをバイパスすることは、単にフロントエンドを学んでいる人たちに示されているとおりです。 https://codecraft.tv/courses/angular/http/http-with-promises/

208
E. Maggini

私の "API Server"はPHPアプリケーションなので、この問題を解決するために私は以下の解決策を見つけました。

index.php に行を配置します。

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
129
Slipstream

AspNetCore Web APIでは、この問題は "Microsoft.AspNetCore.Cors"（ver 1.1.1）を追加し、Startup.csに以下の変更を追加することで解決しました。

public void ConfigureServices(IServiceCollection services)
{ 
    services.AddCors(options =>
    {
          options.AddPolicy("AllowAllHeaders",
                builder =>
            {
                    builder.AllowAnyOrigin()
                           .AllowAnyHeader()
                           .AllowAnyMethod();
                });
    });
    .
    .
    .
}

そして 

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{


    // Shows UseCors with named policy.
    app.UseCors("AllowAllHeaders");
    .
    .
    .
}

そして[EnableCors("AllowAllHeaders")]をコントローラに置きます。

35
Rajkumar Peter

JavaScript XMLHttpRequest および フェッチ 同じOriginのポリシーに従います。そのため、XMLHttpRequestまたはFetchを使用している Webアプリケーションは、それ自身のドメインへのHTTP 要求しか作成できませんでした。

ソース： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

サーバー側から Access-Control-Allow-Origin：* HTTPヘッダーを送信する必要があります。

HTTPサーバーとしてApacheを使用している場合は、次のようにそれをApache構成ファイルに追加できます。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Apacheでは、mod_headersはデフォルトで有効になっていますが、次のコマンドを実行して有効にしてください。

 a2enmod headers
14
JedatKinports

chrome-extension を書いているのなら

manifest.jsonにあなたのドメインのための許可を追加しなければなりません。

"permissions": [
   "http://example.com/*",
   "https://example.com/*"
]
8
freedev

偶然にIIS serverを使用している場合HTTPリクエストヘッダオプションで以下のヘッダを設定できます。

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods: 'HEAD, GET, POST, PUT, PATCH, DELETE'
Access-Control-Allow-Headers: 'Origin, Content-Type, X-Auth-Token';

このすべての投稿で、getなどはうまく機能します。

5
Sunil Kumar

CORSに関しては、注意点がいくつかあります。まず、ワイルドカード*は許可されていませんが、どこかでそれを読んでいるのでこの記事を見逃すことはできません。

あなたが別のドメインからリクエストをしているなら、あなたはallow Originヘッダを追加する必要があります。 Access-Control-Allow-Origin: www.other.com

POST/PUT/PATCHのようにサーバーリソースに影響を与えるようなリクエストをしていて、MIMEタイプが以下のapplication/x-www-form-urlencoded、multipart/form-data、またはtext/plainと異なる場合、ブラウザは自動的に飛行前のOPTIONSリクエストを行い、それを許可します。

したがって、あなたのAPI /サーバはそれに応じてこれらのOPTIONSリクエストを処理する必要があります、あなたは適切なaccess control headersで応答する必要があり、httpレスポンスステータスコードは200である必要があります。

ヘッダはこのようなものであるべきです、あなたの必要性のためにそれらを調整してください： Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type Access-Control-Max-Age: 86400 max-ageヘッダは重要です、私の場合、それはそれなしではうまくいかないでしょう、私はブラウザニーズを推測「アクセス権」が有効である期間に関する情報。

さらに、あなたが作っているならば。別のドメインからのapplication/json mimeを持つPOSTリクエストでも、前述のallow Originヘッダーを追加する必要があるので、次のようになります。

Access-Control-Allow-Origin: www.other.com Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type Access-Control-Max-Age: 86400

プリフライトが成功し、必要な情報がすべて揃ったら、実際のリクエストが行われます。 

一般的に言って、最初のリクエストや飛行前のリクエストでどんなAccess-Controlヘッダがリクエストされたとしても、それが機能するためにはレスポンスで与えられるべきです。

MDNドキュメントの このリンク に良い例があります。また、 this SO post をチェックしてください。

4
Sasa Blagojevic

PHPでは、ヘッダを追加することができます。

<?php
header ("Access-Control-Allow-Origin: *");
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: *");
...
4
atiruz

Pythonフラスコサーバーの場合は、クロスドメイン要求を有効にするためにflask-corsプラグインを使用できます。

参照してください： https://flask-cors.readthedocs.io/en/latest/

4
Teriblus

Node JSアプリケーションでクロスオリジンリクエストの問題を解決するには

npm i cors

そして以下の行をapp.jsに追加するだけです。

let cors = require('cors')
app.use(cors())
2
Rohit Parte

私のApache VirtualHost設定ファイルには、以下の行を追加しました。

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, Origin, authorization, accept, client-security-token"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
2
hugsbrugs

API Gatewayで Lambda Integrated Proxy を使用しています。あなたはあなたが直接それにあなたの要求を提出しているかのようにあなたのラムダ関数を設定する必要があります、それは関数が適切に応答ヘッダを設定するべきであることを意味します。 （カスタムのラムダ関数を使用している場合、これはAPI Gatewayによって処理されます。） 

//In your lambda's index.handler():
exports.handler = (event, context, callback) => {
     //on success:
     callback(null, {
           statusCode: 200,
           headers: {
                "Access-Control-Allow-Origin" : "*"
           }
     }
}
2
Xu Chen

DNSサーバーが8.8.8.8（google's）に設定されていると、私はこの問題に直面しました。実際には、問題はルータにあった、私のアプリケーションは（私の特定のケースのために）ローカルではなく、Googleを介してサーバーに接続しようとしました。 8.8.8.8を削除し、これで問題は解決した。この問題はCORSの設定で解決したことは知っているが、誰かが私と同じ問題を抱えている

1
Kirill Gusyatin

私はアップロードのためにAWS sdkを使用しています。おかげで@lsimoneau 45581857 まったく同じことが起こっていました。私は単にregionオプションを付けることによって私のバケツの上の地域に私の要求URLを指し示した、そしてそれはうまくいった。

 const s3 = new AWS.S3({
 accessKeyId: config.awsAccessKeyID,
 secretAccessKey: config.awsSecretAccessKey,
 region: 'eu-west-2'  // add region here });
1
davyCode

GeoServer のスタンドアロンディストリビューションにはJettyアプリケーションサーバーが含まれています。クロスオリジンリソース共有（CORS）を有効にして、ドメイン外のJavaScriptアプリケーションでGeoServerを使用できるようにします。

Webapps/geoserver/WEB-INF/web.xmlから、以下の<filter>と<filter-mapping>のコメントを外します。

<web-app>
  <filter>
      <filter-name>cross-Origin</filter-name>
      <filter-class>org.Eclipse.jetty.servlets.CrossOriginFilter</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>cross-Origin</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>
1
Yassine Ech-Charafi

このエラーの非常に一般的な原因は、ホストAPIがリクエストをhttpメソッド（PUTなど）にマップしていて、APIクライアントが別のhttpメソッド（POSTまたはGETなど）を使用してAPIを呼び出していることです。

1
Christian Nwafor

私たちのチームは時々Vue、axiosそしてC＃Web Apiを使ってこれを見ます。ヒットしようとしているエンドポイントにroute属性を追加することで修正されます。

[Route("ControllerName/Endpoint")]
[HttpOptions, HttpPost]
public IHttpActionResult Endpoint() { }
1
w00ngy

私は ChromeからCORSを無効にするのは良い方法ではないと思います あなたがイオンでそれを使っているなら、確かにMobile Buildで問題は再び発生するでしょう。

だからあなたのバックエンドで修正するほうがよい。

まず第一に、Inヘッダでは、

  • header（ 'Access-Control-Allow-Origin：*'）;
  • header（ 'ヘッダーセットAccess-Control-Allow-Headers： "Origin、X-Requested-With、Content-Type、Accept"）;

APIがGETとPOSTの両方で動作している場合は、ヘッダーにも設定します。

if（$ _SERVER ['REQUEST_METHOD'] == 'オプション'）{if （isset（$ _ SERCESS_CONTROL_REQUEST_METHOD ']）） header（ "Access-Control-Allow-Methods： GET、POST、OPTIONS "）;
[（____）if（isset（$ _ SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']）） header（ "Access-Control-Allow-Headers：
{$ _SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']} "）; exit（0）;}

0
Shubham Pandey