it-swarm.com.de

Anforderungsheaderfeld "Zugriffskontrolle-Kopfzeilen zulassen" wird von "Zugriffskontrolle-Kopfzeilen zulassen" nicht zugelassen

Ich versuche, Dateien mit einer Post-Anfrage an meinen Server zu senden, aber beim Senden wird der Fehler verursacht:

Anforderungsheaderfeld Der Inhaltstyp wird von den Zugriffskontroll-Zulassen-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 wird von Access-Control-Allow-Headers nicht zugelassen

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 Überschriften soll ich hinzufügen/entfernen?

203
user3194367

Der Server (an den die POST -Anforderung gesendet wird) muss den Access-Control-Allow-Headers -Header (usw.) in seiner Antwort enthalten. Das Einfügen in Ihre Anfrage des Kunden hat keine Auswirkung.

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

169
Shai

Ich hatte das gleiche problem In der jQuery-Dokumentation Ich fand:

Wenn Sie für domänenübergreifende Anforderungen einen anderen Inhaltstyp als application/x-www-form-urlencoded, multipart/form-data oder text/plain festlegen, sendet der Browser eine Preflight-OPTIONS-Anforderung an den Server.

Obwohl der Server eine Cross-Origin-Anforderung zulässt, jedoch Access-Control-Allow-Headers nicht zulässt, werden Fehler ausgegeben. Standardmäßig ist der Inhaltstyp angular application/json, der versucht, eine OPTION-Anforderung zu senden. Versuchen Sie, den angular Standardheader zu überschreiben oder Access-Control-Allow-Headers am Serverende zuzulassen. Hier ist ein angular Beispiel:

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

Wenn das irgendjemandem hilft (auch wenn dies 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 ist. Verwenden Sie localhost, wenn Sie wirklich etwas benötigen, das lokal funktioniert.

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

}
46
lekant

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

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

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

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

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

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

Für Details siehe:

13
l3x

Folgendes funktioniert bei mir 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();
});
8

Sie können den richtigen Header in PHP folgendermaßen 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");
7
Vinod Dhakad

Die Überschriften, die Sie festlegen möchten, sind Antwort Überschriften. Sie müssen in der Antwort von dem Server bereitgestellt werden, an den Sie die Anforderung richten.

Sie haben keinen Platz auf dem Client festgelegt. Es wäre sinnlos, über die Möglichkeit zu verfügen, Berechtigungen zu erteilen, wenn sie von der Site erteilt werden könnten, die anstelle der Site, der die Daten gehörten, die Berechtigung haben wollte.

4
Quentin

wenn Sie JavaScript-Anforderungen für ionic2 oder anglejs 2 in Ihrem chrome auf dem PC oder Mac testen, müssen Sie das CORS-Plug-in für den chrome Browser installieren, um Cross Origin zuzulassen.

mayba get Anfragen werden ohne das funktionieren, aber post und puts und delete werden Sie brauchen, um das cors Plugin zu installieren, um zu testen, ob es ohne Probleme geht, das ist definitiv nicht cool, aber ich weiß nicht, wie Leute es ohne das CORS Plugin machen.

und vergewissern Sie sich auch, dass die json-Antwort von einem json-Status nicht 400 zurückgibt

3
albaiti

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();
});
3
realappie

das ist ein Backend-Problem. Wenn Sie sails 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'
};
3
Sedat Y

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");   
    }
}
2
russellhoff

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers Fehler bedeutet, dass das Feld Access-Control-Allow-Origin des HTTP-Headers nicht verarbeitet oder von der Antwort nicht zugelassen wird. Entfernen Sie das Feld Access-Control-Allow-Origin aus dem Anforderungsheader.

2
Tony Stark