Das Anforderungsheaderfeld Access-Control-Allow-Headers ist von Access-Control-Allow-Headern nicht zulässig

Ich versuche, Dateien mit einer Post-Anfrage an meinen Server zu senden, aber wenn sie gesendet wird, verursacht sie den Fehler:

Anforderungsheaderfeld Inhaltstyp wird von Access-Control-Allow-Headern nicht zugelassen.

Also habe ich den Fehler gegoogelt und die Header hinzugefügt:

$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"
}

Dann bekomme ich den Fehler:

Anforderungsheaderfeld Access-Control-Allow-Origin ist von Access-Control-Allow-Headern nicht zulässig

Also habe ich das gegoogelt und die einzige ähnliche Frage, die ich finden konnte, war eine halbe Antwort, die dann als Off-Topic geschlossen wurde. Welche Header soll ich hinzufügen / entfernen?

Der Server (an den die POST-Anforderung gesendet wird) muss den Access-Control-Allow-HeadersHeader (usw.) in seine Antwort aufnehmen . Das Einfügen in Ihre Anfrage vom Kunden hat keine Auswirkung.

Dies liegt daran, dass der Server festlegen muss, dass er Ursprungsübergreifende Anforderungen akzeptiert (und dass er den Content-TypeAnforderungsheader usw. zulässt ). Der Client kann nicht selbst entscheiden, ob ein bestimmter Server CORS zulassen soll.

Ich hatte das gleiche Problem. In der jQuery-Dokumentation fand ich:

Für Cross-Domain - Anfragen, den Inhaltstyp auf etwas anderes als die Einstellung application/x-www-form-urlencoded, multipart/form-dataoder text/plainden Browser auslösen ein Preflight - OPTIONS - Anforderung an den Server zu senden.

Obwohl der Server eine Anforderung für unterschiedliche Herkunft zulässt Access-Control-Allow-Headers, diese jedoch nicht zulässt , werden Fehler ausgegeben. Standardmäßig lautet application/jsonder Winkelinhaltstyp, der versucht, eine OPTION-Anforderung zu senden. Versuchen Sie, den eckigen Standardheader zu überschreiben oder das Serverende zuzulassen Access-Control-Allow-Headers. Hier ist ein eckiges Beispiel:

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

Wenn das irgendjemandem hilft (auch wenn dies etwas schlecht ist, da wir dies nur für Entwicklungszwecke zulassen müssen), ist hier eine Java-Lösung, da ich auf dasselbe Problem gestoßen bin. [Bearbeiten] Verwenden Sie nicht den Platzhalter *, da dies eine schlechte Lösung istlocalhost Sie ihn wenn wirklich etwas lokal funktionieren muss.

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() {}

}

Der Server (an den die POST-Anforderung gesendet wird) muss den Inhaltstyp enthalten Header in seine Antwort aufnehmen.

Hier ist eine Liste typischer Header, einschließlich eines benutzerdefinierten "X_ACCESS_TOKEN" -Headers:

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

Das muss Ihr http-Server-Typ für den Webserver konfigurieren, an den Sie Ihre Anforderungen senden.

Möglicherweise möchten Sie auch Ihren Server bitten, den Header "Content-Length" offenzulegen.

Er erkennt dies als CORS-Anforderung (Cross-Origin Resource Sharing) und sollte die Auswirkungen dieser Serverkonfigurationen verstehen.

Für Details siehe:

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

Sie können den richtigen Header in PHP damit aktivieren:

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");

Folgendes funktioniert für mich mit 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();
});

Die Header Sie Satz versuchen , sind Antwort - Header. Sie müssen in der Antwort von dem Server bereitgestellt werden, an den Sie die Anfrage stellen.

Sie haben keinen Platz auf dem Client festgelegt. Es wäre sinnlos, über ein Mittel zum Erteilen von Berechtigungen zu verfügen, wenn diese von der Site erteilt werden könnten, die die Berechtigung wünschte , anstelle der Site, der die Daten gehörten.

Wenn dieses Problem bei einem Express-Server auftritt, fügen Sie die folgende Middleware hinzu

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

Wenn Sie einige Javascript-Anforderungen für ionic2 oder anglejs 2 in Ihrem Chrome auf einem PC oder Mac testen, müssen Sie das CORS-Plugin für den Chrome-Browser installieren, um Cross-Origin zuzulassen.

mayba get Anfragen werden funktionieren, ohne dass dies erforderlich ist, aber beim Posten und Setzen und Löschen müssen Sie das cors-Plugin installieren, damit das Testen ohne Probleme funktioniert. Das ist definitiv nicht cool, aber ich weiß nicht, wie die Leute es ohne das CORS-Plugin machen.

und stellen Sie außerdem sicher, dass die JSON-Antwort nicht 400 von einem JSON-Status zurückgibt

Dies ist ein Backend-Problem. Wenn Sie die Segel-API im Backend verwenden, ändern Sie cors.js und fügen Sie Ihre Datei hier hinzu

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'
};

In Asp Net Core , damit es schnell für die Entwicklung funktioniert; in Startup.cs, Configure methodhinzufügen

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

In meinem Fall erhalte ich mehrere Parameter als @HeaderParam in einer Webdienstmethode.

Diese Parameter MÜSSEN in Ihrem CORS-Filter folgendermaßen deklariert werden:

@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-HeadersFehler bedeutet, dass das Access-Control-Allow-OriginFeld des HTTP-Headers nicht als Antwort behandelt oder zugelassen wird. Entfernen Sie das Access-Control-Allow-OriginFeld aus dem Anforderungsheader.

Wenn Sie localhostPHP verwenden und PHP einstellen, um das Problem zu lösen:

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

Von Ihrem Front-End-Einsatz:

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

und boom keine ausgaben mehr ab localhost!