web-dev-qa-db-ja.com

要求ヘッダーフィールドAccess-Control-Allow-HeadersはAccess-Control-Allow-Headersでは許可されていません

送信要求を使用してファイルをサーバーに送信しようとしていますが、送信するとエラーが発生します。

Request header field Content-Type is not allowed by 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"
}

それから私はエラーが出ます：

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers

だから私はグーグルと私が見つけることができた唯一の同様の質問はオフトピックとして閉じた半回答を提供された。追加/削除するヘッダーは何ですか。

javascriptangularjspostheadercors
185
user3194367

サーバー（POST要求の送信先）には、Access-Control-Allow-Headersヘッダー（etc）その応答内を含める必要があります。クライアントからの要求にそれらを入れても効果はありません。

これは、Originがクロスリクエストを受け付けること（そしてContent-Typeリクエストヘッダを許可することなど）を指定するのはサーバ次第であるためです。クライアントは、特定のサーバがCORSを許可する必要があると判断できません。

161
Shai

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

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

そのため、サーバーはOriginとのクロスリクエストを許可しますが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'
    }
});
196
Fisherman

それが開発者のためだけに許可しなければならないような貧弱な人でさえ、それが誰かに役立つのであれば、これは私が同じ問題に遭遇したときの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() {}

}
42
lekant

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

以下は、含まれる典型的なヘッダのリストです。カスタムの "X_ACCESS_TOKEN"ヘッダが1つ含まれています。

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

それがあなたのhttpサーバの人があなたがあなたのリクエストを送っているWebサーバのために設定する必要があるものです。

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

彼はこれをCross-Origin Resource Sharing（CORS）要求として認識し、それらのサーバー構成を作成することの意味を理解するはずです。

詳細は以下を参照してください。

13
l3x

以下は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();
});
8
Fernando Gabrieli

これで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");
6
Vinod Dhakad

あなたが設定しようとしているヘッダは response / headersです。それらは、あなたが要求をしているサーバによって、応答として提供されなければなりません。

彼らはクライアントに設定されている場所がありません。データを所有しているサイトの代わりにwant _というパーミッションがサイトによって付与される可能性がある場合は、パーミッションを付与する手段が無意味になります。

4
Quentin

pCまたはMacのChromeで、ionic2またはangularjs 2のjavascript要求をテストする場合は、クロスブラウザを許可するために必ずChromeブラウザ用のCORSプラグインをインストールしてください。

mayba getリクエストはそれを必要とせずに動作するでしょう、しかしpostとputとdeleteは問題なく行くためにテストのためにcorsプラグインをインストールする必要があるでしょう。

また、jsonの応答が何らかのjsonステータスによって400を返さないようにする

3
albaiti

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

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

これはバックエンドの問題です。バックエンドで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'
};
3
Sedat Y

私の場合は、いくつかのパラメータを@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");   
    }
}
2
russellhoff

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

2
Tony Stark