リクエストヘッダーフィールドAccess-Control-Allow-HeadersはAccess-Control-Allow-Headersでは許可されていません

postリクエストでサーバーにファイルを送信しようとしていますが、送信するとエラーが発生します。

リクエストヘッダーフィールドContent-Typeは、Access-Control-Allow-Headersでは許可されていません。

だから私はエラーをググってヘッダーを追加しました：

$http.post($rootScope.URL, {params: arguments}, {headers: {
    "Access-Control-Allow-Origin" : "*",
    "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}

次に、エラーが発生します：

リクエストヘッダーフィールドAccess-Control-Allow-OriginはAccess-Control-Allow-Headersでは許可されていません

それで私はそれをググりました、そして私が見つけることができた唯一の同様の質問は半分の答えを提供され、そしてトピック外として閉じられました。追加/削除するヘッダーは何ですか？

サーバは、（POSTリクエストが送信されていること）を含む必要があるAccess-Control-Allow-Headersヘッダ（など）、その応答。クライアントからのリクエストにそれらを入れても効果はありません。

これは、サーバーがクロスオリジン要求を受け入れるContent-Typeかどうか（および要求ヘッダーを許可するかどうかなど）を指定する必要があるためです。クライアントは、特定のサーバーがCORSを許可するかどうかを自ら判断することはできません。

私も同じ問題を抱えていました。私が見つけたjQueryドキュメントで：

クロスドメインリクエストについては、以外にコンテンツタイプを設定するapplication/x-www-form-urlencoded、multipart/form-dataまたはtext/plainサーバにプリフライトOPTIONS要求を送信するために、ブラウザをトリガします。

したがって、サーバーはクロスオリジン要求を許可しますが、は許可しませんがAccess-Control-Allow-Headers、エラーをスローします。デフォルトではapplication/json、角度コンテンツタイプはで、OPTIONリクエストを送信しようとしています。角度のデフォルトヘッダーを上書きするかAccess-Control-Allow-Headers、サーバー側で許可してください。これは角度のサンプルです：

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

それが誰かを助ける場合、（これは開発目的でのみ許可する必要があるため、これは一種の貧弱な場合でも）同じ問題が発生したため、ここにJavaソリューションがあります。[編集]ワイルドカードを使用しないでください*これは悪い解決策localhostです。ローカルで何かを実行する必要がある場合に使用してください。

public class SimpleCORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    chain.doFilter(req, res);
}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

サーバー（POST要求の送信先）は、応答にContent-Typeヘッダーを含める必要があります。

ここに、1つのカスタム「X_ACCESS_TOKEN」ヘッダーを含む、含める一般的なヘッダーのリストを示します。

"X-ACCESS_TOKEN", "Access-Control-Allow-Origin", "Authorization", "Origin", "x-requested-with", "Content-Type", "Content-Range", "Content-Disposition", "Content-Description"

これは、リクエストの送信先のWebサーバーに対して、httpサーバーの担当者が構成する必要があるものです。

"Content-Length"ヘッダーを公開するようサーバー担当者に依頼することもできます。

彼はこれをCross-Origin Resource Sharing（CORS）リクエストとして認識し、それらのサーバー構成の影響を理解する必要があります。

詳細は以下をご覧ください：

• http://www.w3.org/TR/cors/
• http://enable-cors.org/

これを使用して、PHPで適切なヘッダーをアクティブ化できます。

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

以下はnodejsで私のために働きます：

xServer.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept');

  next();
});

設定しようとしているヘッダーは応答ヘッダーです。それらは、応答で、要求を行っているサーバーによって提供される必要があります。

彼らはクライアントに設定されている場所がありません。それは彼らがサイトによって付与することができれば、権限を付与する手段を持つ無意味になりたかったデータを所有しているサイトのではなく、許可を。

エクスプレスサーバーでこの問題が発生した場合は、次のミドルウェアを追加してください。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

PCまたはMacのChromeでionic2またはangularjs 2の一部のjavascriptリクエストをテストする場合は、クロスオリジンを許可するために、ChromeブラウザーのCORSプラグインをインストールしてください。

mayba getリクエストはそれを必要とせずに機能しますが、postとputsとdeleteは問題なくテストを行うためにcorsプラグインをインストールする必要があります。

また、json応答が何らかのjsonステータスによって400を返さないことを確認してください

これはバックエンドの問題です。バックエンドでsails apiを使用する場合は、cors.jsを変更して、ここにファイルを追加してください

module.exports.cors = {
  allRoutes: true,
  origin: '*',
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'
};

Aspネットコア、すぐにそれが開発のために働いて得るために、でStartup.cs、Configure methodアドオン

app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

私の場合、@ HeaderParamとしてWebサービスメソッドにいくつかのパラメーターを受け取っています。

これらのパラメーターは、CORSフィルターで次のように宣言する必要があります。

@Provider
public class CORSFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");
        ...
        headers.add("Access-Control-Allow-Headers", 
        /*
         * name of the @HeaderParam("name") must be declared here (raw String):
         */
        "name", ...);
        headers.add("Access-Control-Allow-Credentials", "true");
        headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");   
    }
}

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-HeadersエラーはAccess-Control-Allow-Origin、HTTPヘッダーのフィールドが処理されないか、応答で許可されないことを意味します。Access-Control-Allow-Originリクエストヘッダーからフィールドを削除します。

localhost問題を解決するためにPHPをこれに設定している場合：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type'); 

フロントエンド使用から：

{headers: {"Content-Type": "application/json"}}

そして、ブームからこれ以上の問題はありませんlocalhost！