Campo de cabeçalho de solicitação Acesso-Controle-Permitir-Cabeçalhos não é permitido por Acesso-Controle-Permitir-Cabeçalhos

Estou tentando enviar arquivos para o meu servidor com uma solicitação de postagem, mas quando ele envia causa o erro:

O campo de cabeçalho da solicitação Content-Type não é permitido pelo Access-Control-Allow-Headers.

Então pesquisei o erro no Google e adicionei os cabeçalhos:

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

Então eu recebo o erro:

O campo de cabeçalho da solicitação Access-Control-Allow-Origin não é permitido pelos Access-Control-Allow-Headers

Então, pesquisei isso no Google e a única pergunta semelhante que pude encontrar foi fornecida meia resposta e encerrada como fora de tópico. Quais cabeçalhos devo adicionar / remover?

O servidor (para o qual a solicitação POST é enviada) precisa incluir o Access-Control-Allow-Headerscabeçalho (etc) em sua resposta . Colocá-los em sua solicitação do cliente não tem efeito.

Isso ocorre porque cabe ao servidor especificar que aceita solicitações de origem cruzada (e que permite o Content-Typecabeçalho da solicitação, etc.) - o cliente não pode decidir por si mesmo que um determinado servidor deve permitir o CORS.

Eu tive o mesmo problema. Na documentação do jQuery, encontrei:

Para solicitações de domínio cruzado, definindo o tipo de conteúdo a qualquer coisa que não seja application/x-www-form-urlencoded, multipart/form-dataou text/plainirá acionar o navegador para enviar uma opções de pré-impressão solicitar ao servidor.

Portanto, embora o servidor permita solicitações de origem cruzada, mas não permita Access-Control-Allow-Headers, lançará erros. Por padrão, o tipo de conteúdo angular é application/json, que está tentando enviar uma solicitação OPTION. Tente substituir o cabeçalho padrão angular ou permitir Access-Control-Allow-Headersno final do servidor. Aqui está uma amostra angular:

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

Se isso ajudar alguém, (mesmo que seja um pouco ruim, pois devemos apenas permitir isso para fins de desenvolvedor), aqui está uma solução Java, pois encontrei o mesmo problema. [Editar] Não use o curinga *, pois é uma péssima solução, use localhostse você realmente precisar de algo trabalhando localmente.

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

}

O servidor (para o qual a solicitação POST é enviada) precisa incluir o cabeçalho Content-Type em sua resposta.

Aqui está uma lista de cabeçalhos típicos a serem incluídos, incluindo um cabeçalho "X_ACCESS_TOKEN" personalizado:

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

É para isso que o pessoal do servidor http precisa configurar para o servidor da Web para o qual você está enviando suas solicitações.

Você também pode solicitar ao seu servidor que exponha o cabeçalho "Comprimento do conteúdo".

Ele reconhecerá isso como uma solicitação de compartilhamento de recursos de origem cruzada (CORS) e deve entender as implicações de fazer essas configurações de servidor.

Para detalhes, consulte:

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

Você pode ativar o cabeçalho apropriado no PHP com isso:

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

O seguinte funciona para mim com o 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();
});

Os cabeçalhos que você está tentando definir são cabeçalhos de resposta . Eles devem ser fornecidos, na resposta, pelo servidor para o qual você está fazendo a solicitação.

Eles não têm lugar definido no cliente. Seria inútil ter um meio de conceder permissões se elas pudessem ser concedidas pelo site que desejava permissão em vez do site que possuía os dados.

Se alguém tiver esse problema com um servidor expresso, adicione o seguinte middleware

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

se você estiver testando algumas solicitações javascript para ionic2 ou angularjs 2, no chrome no pc ou mac, certifique-se de instalar o plugin CORS no navegador chrome para permitir a origem cruzada.

O mayba get request funcionará sem a necessidade disso, mas postar e colocar e excluir precisará instalar o plugin cors para testes sem problemas, isso definitivamente não é legal, mas eu não sei como as pessoas fazem isso sem o plugin CORS.

e também verifique se a resposta json não está retornando 400 por algum status json

este é um problema de back-end. se usar velas api no backend mudar cors.js e adicione seu arquivado aqui

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

No Asp Net Core , para fazê-lo funcionar rapidamente para o desenvolvimento; em Startup.cs, Configure methodadd

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

No meu caso, estou recebendo vários parâmetros como @HeaderParam em um método de serviço da web.

Esses parâmetros DEVEM ser declarados no seu filtro CORS dessa maneira:

@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-Headerserror significa que o Access-Control-Allow-Origincampo do cabeçalho HTTP não é tratado ou permitido por resposta. Remova o Access-Control-Allow-Origincampo do cabeçalho da solicitação.

Se você estiver usando um localhostPHP configurado para resolver o problema:

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

No seu uso front-end:

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

e boom sem mais problemas localhost!