[Javascript] Anforderungs-Header-Feld Zugriffskontrolle-Erlaube-Header ist nicht erlaubt durch Zugriffskontrolle-Zulassen-Header



Answers

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

Bei domänenübergreifenden Anfragen wird durch Setzen des Inhaltstyps auf etwas anderes als application/x-www-form-urlencoded , multipart/form-data oder text/plain der Browser veranlasst, eine Preflight-OPTIONS-Anfrage an den Server zu senden.

Obwohl der Server Cross-Ursprungsanforderungen zulässt, aber Access-Control-Allow-Headers nicht zulässt, werden Fehler Access-Control-Allow-Headers . Der angulare Inhaltstyp ist standardmäßig die application/json , die versucht, eine OPTION-Anfrage zu senden. Versuchen Sie, den eckigen Standardheader zu überschreiben oder Access-Control-Allow-Headers am Access-Control-Allow-Headers zuzulassen. Hier ist ein eckiges Beispiel:

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

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

Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

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:

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

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?




In meinem Fall empfange ich mehrere Parameter wie @HeaderParam in eine Web-Service-Methode.

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



Die Header, die Sie festlegen möchten, sind Antwortheader. 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, Berechtigungen zu erteilen, wenn sie von der Site erteilt werden könnten, die eine Berechtigung haben wollte , anstatt von der Site, die die Daten besaß.




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

Im Folgenden finden Sie eine Liste der typischen 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"

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

Sie können auch Ihren Server-Typ bitten, den Header "Content-Length" freizugeben.

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

Für Details siehe:




Das ist Backend-Problem. Wenn Sie sails api auf Backend verwenden, ändern Sie cors.js und fügen Sie Ihr Feld 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'
};



Links