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

ngResourceを使用してアマゾンウェブサービスでREST 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。

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

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

1. CORSをオフにします。例えば： ChromeでCORをオフにする方法
2. ブラウザーのプラグインを使用する
3. nginxなどのプロキシを使用します。 セットアップ方法の例
4. サーバーに必要な設定を行います。これは、EC2インスタンスにロードしたWebサーバーのより多くの要因です（これが「Amazon Webサービス」の意味するところと想定しています）。特定のサーバーについては、CORS Webサイトを参照してください。

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

あなたの仕事を終わらせるためだけにそれをオフにすることで（OK、他のサイトにアクセスし、すぐに缶を蹴るだけならセキュリティを貧弱にしてください）、プロキシを使用してブラウザがすべてのリクエストがローカルホストからのものであると考えさせることができます実際には、リモートサーバーを呼び出すローカルサーバーがあります。

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

今や人気の需要により、CORS情報が100％増えました。

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

私の「APIサーバー」は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');

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")]コントローラを装着します。

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

別のドメインからリクエストを行う場合は、許可元ヘッダーを追加する必要があります。

 Access-Control-Allow-Origin: www.other.com 

POST / PUT / PATCHなどのサーバーリソースに影響を与えるリクエストを作成している場合、およびMIMEタイプが以下と異なる場合 application/x-www-form-urlencoded、multipart/form-dataまたはtext/plainブラウザが自動的に飛行前のオプションは、それを可能にする場合は、サーバーに確認するように要求ようになります。

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ヘッダーは重要です。私の場合、それがないと機能しません。ブラウザには、「アクセス権」が有効な期間の情報が必要だと思います。

さらに、たとえば別のドメインからのMIMEを使用したPOSTリクエストを行う場合は、application/json前述の許可元ヘッダーを追加する必要があるため、次のようになります。

   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ドキュメントの良い例があり、このSOの投稿も確認する必要があります

JavaScript XMLHttpRequestとFetchは、同一生成元ポリシーに従います。そのため、XMLHttpRequestまたはFetchを使用するWebアプリケーションは、自身のドメインに対してのみHTTPリクエストを行うことができました。

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

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

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

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

ApacheではデフォルトでMod_headersが有効になっていますが、次のコマンドを実行して有効にすることができます。

 a2enmod headers

クロム拡張機能を作成している場合

manifest.jsonドメインの権限を追加する必要があります。

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

偶然にIISサーバーを使用している場合。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';

これですべての投稿、取得などが正常に動作します。

Pythonフラスコサーバーの場合、フラスコ-corsプラグインを使用してクロスドメインリクエストを有効にできます。

参照：https : //flask-cors.readthedocs.io/en/latest/

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: *");
...

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

npm i cors

そして、以下の行を app.js

let cors = require('cors')
app.use(cors())

私の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]

それらのAPIゲートウェイでLambda統合プロキシを使用しています。ラムダ関数をリクエストを直接送信するかのように構成する必要があります。つまり、関数は応答ヘッダーを適切に設定する必要があります。（カスタムラムダ関数を使用している場合、これはAPI Gatewayによって処理されます。）

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

ChromeからCORSを無効にすることは良い方法ではないと思います。これをイオンで使用している場合は、確かにMobile Buildで問題が再び発生するためです。

あなたのバックエンドで修正するので良いです。

まず最初に、Inヘッダーを設定する必要があります。

• header（ 'Access-Control-Allow-Origin：*'）;
• header（ 'Header set Access-Control-Allow-Headers： "Origin、X-Requested-With、Content-Type、Accept"'）;

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

if（$ _SERVER ['REQUEST_METHOD'] == 'OPTIONS'）{if（isset（$ _ SERVER ['HTTP_ACCESS_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）; }

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

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

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

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

アップロードにAWS SDKを使用していますが、オンラインでの検索にしばらく時間を費やした後、このスレッドに遭遇しました。@lsimoneau 45581857のおかげで、まったく同じことが起こっていました。リージョンオプションをアタッチすることで、リクエストURLをバケットのリージョンにポイントするだけで機能しました。

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

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

コメントを解除し、次の<filter>と<filter-mapping>のwebapps / geoserver / WEB-INF / web.xmlのから：

<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. 開く（https://www.npmjs.com/package/cors#enabling-cors-pre-flight）
2. インストールに移動し、コマンドnpm install corsをコピーして、ノードターミナルからインストールします。
3. スクロールして単純な使用法（すべてのCORSリクエストを有効にする）に移動します。次に、urプロジェクトに完全な宣言をコピーして貼り付けて実行します...これは確実に機能します。コメントコードをコピーして、ur app.jsまたはその他の任意の場所に貼り付けますプロジェクトして試してみてください..これは機能します。これにより、すべてのクロスオリジンリソース共有のロックが解除されます。使用のためにサービスを切り替えることができます。

見逃しやすいもの...

ソリューションエクスプローラーで、api-projectを右クリックします。プロパティウィンドウで、[匿名認証]を[有効]に設定します!!!

クロムのセキュリティを無効にします。クロムのショートカットを右クリックして作成します->プロパティ->ターゲット、この「C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe」を貼り付けます--disable-web-security --user -data-dir = "c：/ chromedev"