8

Preciso realizar uma requisição POST usando angular (http.post) e preciso passar para minha API (.NET) no meu header as credenciais de acesso (Estou utilizando basic authentication).

Authorization:Basic dXNlcm5hbWU6cGFzc3dvcmQ=

No angular altero o header conforme eu preciso

$http.defaults.headers.common.Authorization = 'Basic ' + credentials;

Mas no momento que realizo o POST para a API, o Angular (ou browser) muda meu POST para OPTIONS

Request Method:OPTIONS

Já procurei em vários lugares sobre, mas não consegui achar uma solução. No Web.Config da minha API já configurei para permitir CORS.

  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://localhost:9000" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Cache-Control" />
    <add name="Access-Control-Allow-Credentials" value="true" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>

Será que alguém consegue me dizer o que posso estar fazendo errado? Como procurar a solução? Desde já, obrigado!

2 Respostas 2

6

Problema resolvido, realmente o problema era na minha WebApi.

Para adicionar suporte ao CORS tive que utilizar o pacote Microsoft.AspNet.WebApi.Cors do NuGet, seguindo o artigo que encontrei aqui.

Adicione o pacote Microsoft.AspNet.WebApi.Cors ao projeto utilizando o NuGet

Install-Package Microsoft.AspNet.WebApi.Cors

Adicione o código na configuração WebApiConfig.cs

public static void Register(HttpConfiguration config)
{
    // New code
    config.EnableCors();
}

Para habilitar cross-origin adicione [EnableCors] ao controller ou método que desejar

[EnableCors(origins: "http://example.com", headers: "*", methods: "*")]
public class TestController : ApiController
{
    // Controller methods not shown...
}

Se desejar habilitar globalmente

public static void Register(HttpConfiguration config)
{
    var corsAttr = new EnableCorsAttribute("http://example.com", "*", "*");
    config.EnableCors(corsAttr);
}
1
  • Um adendo apenas. Pode-se configurar o hosts file da máquina local pra subir o frontend com a url example.com (precisa subir o Angular na porta 80, default para aplicações web). Assim você pode, em tempo de desenvolvimento, se comunicar bem com sua API. Commented 1/06/2019 às 16:20
3

Você precisa adicionar a URL dos recursos à whitelist do DelegateProvider. Assim:

myApp
.config(['$sceDelegateProvider', function($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist(['self','http://localhost:9000/**']);
 }]);

Caso você não especifique, seu browser tentará obter a lista de autorizações do servidor, via cabeçalho OPTIONS. Isso é parte da especificação do padrão CORS.

1
  • Lendo o link que você passou, entendi um pouco o que acontece (eu acho). Quando faço uma requisição com um header customizado primeiro SEMPRE será enviado um OPTIONS, é isso? De qualquer forma adicionei o código no app.config e continuo recebendo a mesma resposta. Acho que tenho que fazer algo na minha WebApi pra aceitar isso. Commented 26/10/2015 às 19:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .