web-dev-qa-db-fra.com

A été bloqué par la stratégie CORS: la réponse à la demande de contrôle en amont ne réussit pas

J'ai créé un serveur de voyage. Cela fonctionne bien et nous pouvons faire une demande POST par Insomnia, mais lorsque nous faisons une demande POST par axios sur notre interface, il envoie une erreur:

has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

Notre demande sur axios:

let config = {
headers: {
  "Content-Type": "application/json",
  'Access-Control-Allow-Origin': '*',
  }
}

let data = {
  "id": 4
 }

 axios.post('http://196.121.147.69:9777/twirp/route.FRoute/GetLists', data, config)
   .then((res) => {
      console.log(res)
     })
    .catch((err) => {
      console.log(err)
   });
}

Mon fichier go:

func setupResponse(w *http.ResponseWriter, req *http.Request) {
    (*w).Header().Set("Access-Control-Allow-Origin", "*")
    (*w).Header().Set("Access-Control-Allow-Methods", "POST,GET,OPTIONS, PUT, DELETE")

    (*w).Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
}


func WithUserAgent(base http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {

    ctx := r.Context()
    ua := r.Header.Get("Jwt")
    ctx = context.WithValue(ctx, "jwt", ua)

    r = r.WithContext(ctx)

    setupResponse(&w, r)
     base.ServeHTTP(w, r)
  })
}

const (
    Host     = "localhost"
    port     = 5432
    user     = "postgres"
    password = "postgres"
    dbname   = "postgres"
)

func main() {

    psqlInfo := fmt.Sprintf("Host=%s port=%d user=%s "+
           "password=%s dbname=%s sslmode=disable",
               Host, port, user, password, dbname)

    server := &s.Server{psqlInfo}

    twirpHandler := p.NewFinanceServiceServer(server, nil)

    wrap := WithUserAgent(twirpHandler)
      log.Fatalln(http.ListenAndServe(":9707", wrap))
}

Comme je l'ai dit précédemment sur Insomnia, cela fonctionne très bien, mais lorsque nous faisons une demande axios POST, la console du navigateur suivante apparaît: 

a été bloqué par la stratégie CORS: La réponse à la demande de contrôle en amont n’est pas vérifiée par le contrôle d’accès: elle n’a pas le statut HTTP ok.

goaxios
3
GGG

Je crois que ceci est l'exemple le plus simple:

header := w.Header()
header.Add("Access-Control-Allow-Origin", "*")
header.Add("Access-Control-Allow-Methods", "DELETE, POST, GET, OPTIONS")
header.Add("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With")

Vous pouvez également ajouter un en-tête pour Access-Control-Max-Age et bien sûr, vous pouvez autoriser les en-têtes et les méthodes de votre choix.

Enfin, vous souhaitez répondre à la demande initiale:

if r.Method == "OPTIONS" {
    w.WriteHeader(http.StatusOK)
    return
}

Bien sûr, il serait probablement plus facile d’utiliser un middleware pour cela. Je ne pense pas l'avoir utilisée, mais celle-ci semble être vivement recommandée.

2
threeve

Activer les requêtes d'origine croisée dans l'API Web ASP.NET cliquez pour plus d'informations

Activer CORS dans l'application WebService. Tout d’abord, ajoutez le package CORS NuGet. Dans Visual Studio, dans le menu Outils, sélectionnez Gestionnaire de packages NuGet, puis sélectionnez Console du gestionnaire de packages. Dans la fenêtre de Package Manager Console, tapez la commande suivante:

Install-Package Microsoft.AspNet.WebApi.Cors

Cette commande installe le dernier package et met à jour toutes les dépendances, y compris les bibliothèques principales de l'API Web. Utilisez l'indicateur -Version pour cibler une version spécifique. Le package CORS nécessite Web API 2.0 ou une version ultérieure.

Ouvrez le fichier App_Start/WebApiConfig.cs. Ajoutez le code suivant à la méthode WebApiConfig.Register:

using System.Web.Http;
namespace WebService
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // New code
            config.EnableCors();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

Ensuite, ajoutez l'attribut [EnableCors] à votre contrôleur/méthodes du contrôleur.

using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;

namespace WebService.Controllers
{
    [EnableCors(origins: "http://mywebclient.azurewebsites.net", headers: "*", methods: "*")]
    public class TestController : ApiController
    {
        // Controller methods not shown...
    }
}

Activer les demandes d'origine croisée (CORS) dans ASP.NET Core

0
Usman Mahmood