web-dev-qa-db-fra.com

Angular 6 Asp.Net (pas Core) La demande Web Api CORS échoue

Je construis une API Web .Net qui sera consommée par le client Angular 6 mais pour une raison quelconque, je ne suis pas en mesure de le faire fonctionner dans mon environnement de développement.

J'ai commencé avec une API Web extrêmement simple qui ne fait que renvoyer une chaîne (avec une communication entre les tests frontend et backend):

// GET: api/Login
public IEnumerable<string> Get()
{
    return new string[] { "Now it works!" };
}

// POST: api/Login
public void Post([FromBody]string value)
{
    string strTest = "I'm doing just nothing";
}

puis dans mon Angular 6 app j'ai une méthode avec la demande de publication suivante:

return this.http.post<any>(`http://localhost:9810/api/Login`, { username, password })
            .pipe(map(user => {
                // login successful if there's a jwt token in the response
                if (user && user.token) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                }

                return user;
            }));

Lors de mes premières tentatives, toutes mes réponses ont échoué avec la réponse:

zone.js: 2969 OPTIONS http: // localhost: 9810/api/Login 405 (méthode non autorisée)
connexion: 1 Échec du chargement http: // localhost: 9810/api/Login : La réponse à la demande de contrôle en amont ne passe pas la vérification du contrôle d'accès: Non 'Access-Control-Allow- L'en-tête d'origine est présent sur la ressource demandée. L'origine ' http: // localhost: 42 ' n'est donc pas autorisée à accéder.

Donc, après avoir enquêté, j'ai ajouté la prise en charge CORS à mon projet WebApi .Net de la manière suivante:

1) Packages Nuget installés:

Microsoft.AspNet.WebApi.Cors
Microsoft.AspNet.Cors

2) Dans la méthode de registre WebApiConfig:

var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*");
// or var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

3) Alternativement à 2) dans l'en-tête de classe du contrôleur Api:

[EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]

Mais aucun ne semble fonctionner, la demande échoue toujours avec la même erreur que celle décrite ci-dessus dans la console du navigateur.

J'ai essayé de créer un WebApi autonome en écoutant les appels http sur http: // localhost: 90 ainsi que ma dernière tentative de publication du WebApi dans mon Windows 10 local IIS = serveur avec port 9810.

Si j'accède à l'url dans le navigateur comme ceci " http: // localhost/api/Login " alors la chaîne est retournée comme ceci:

<ArrayOfstring xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.Microsoft.com/2003/10/Serialization/Arrays">
    <string>Now it works!</string>
</ArrayOfstring>

et aucune erreur ne s'affiche dans la console mais tant que j'essaie de faire la demande par Angular (port par défaut 4200), la demande échoue avec une erreur CORS.

Je suis coincé. Si je ne peux pas le faire fonctionner à partir de Angular je ne pourrai pas faire de débogage et de test.

Merci.

Modifier 1: Chrome info onglet réseau ajouté.

Général:

URL de demande: http: // localhost: 9000/api/Login
Méthode de demande: OPTIONS
Code d'état: 405 Méthode non autorisée
Adresse distante: [:: 1]: 9000
Politique de référent: pas de référent lors de la rétrogradation

En-têtes de réponse:

Autoriser: GET, POST
Longueur du contenu: 76
Type de contenu: application/json; charset = utf-8
Date: mer. 29 août 2018 10:32:36 GMT
Serveur: Microsoft-HTTPAPI/2.0

En-têtes de demande:

Accepter: /
Accepter-Encodage: gzip, dégonfler, br
Accept-Language: es-ES, es; q = 0.9
En-têtes de demande de contrôle d'accès: type de contenu
Méthode de demande de contrôle d'accès: POST
Connexion: garder en vie
Hôte: localhost: 9000
Origine: http: // localhost: 42
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, comme Gecko) Chrome/68.0.3440.106 Safari/537.36

c#angularasp.net-web-apicors
8
Diego Perez

Après avoir lutté la tête toute la matinée et essayé tout ce que chacun de vous a suggéré ici, je ne peux pas croire que mon problème aurait pu être résolu si facilement.

En ce qui concerne la suggestion de @Madpop, Application_BeginRequest (pour une raison quelconque) n'a jamais été renvoyé (je ne veux pas passer beaucoup de temps à chercher pourquoi).

La solution @Steveland impliquait d'ajouter l'injection de dépendances et cela m'a compliqué un peu (je n'ai pas beaucoup d'expérience avec cela), indépendamment du fait que je n'utilise pas Asp.Net Core mais Asp.Net Framework 4.6.

Je cherchais une solution simple à un problème que je pensais qu'il aurait dû être facile à résoudre et la clé s'ajoutait

[HttpPost]
[HttpOptions] //this was the key
[Authorize]

à l'en-tête de méthode Post. C'était la seule façon pour moi d'autoriser le verbe "Options" dans la demande.

Je ne sais pas si c'est la meilleure façon d'y arriver mais pour l'instant ça marche (faites-moi savoir ce que vous en pensez les gars).

J'apprécie toute l'aide que j'ai reçue ici de tout le monde et je dis merci et comme je ne suis pas un expert sur ce sujet (Angular + Web Api), je voudrais enfin demander au suivant:

Vais-je devoir mettre cela [HttpOptions] également pour la production lorsque l'API sera déployée sur le serveur ou cela est juste nécessaire pour l'instant pour le débogage et les tests localement?

Modifier 1:

Après les tests, j'ai remarqué que cela fonctionne avec l'auto-hébergement Web Api mais lorsque je publie Web Api sur mon local IIS je reçois "415 Unsupported Media Type" dans le navigateur :(

6
Diego Perez

En ce qui concerne le problème des cors, j'ai également rencontré le problème similaire, j'ai créé un fichier global.asax que j'ai placé le code ci-dessous

protected void Application_BeginRequest()
{

    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
    {
        //These headers are handling the "pre-flight" OPTIONS call sent by the browser
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://staging.example.com:8044");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Accepts, Content-Type, Origin, X-My-Header");
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "60");
        HttpContext.Current.Response.End();
    }

}

cela a fonctionné pour moi dans angular 6 aussi bien dans ionic 3 aussi et avant tout cela, essayez d'installer https://chrome.google. com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi? hl = en

ci-dessus chrome plugin et l'activer, puis essayez d'exécuter l'application

2
Madpop