web-dev-qa-db-fra.com

Essayer d'utiliser fetch et pass en mode: no cors

Je peux atteindre ce noeud final, http://catfacts-api.appspot.com/api/facts?number=99 via Postman et il renvoie JSON

De plus, j'utilise create-react-app et voudrais éviter de configurer une configuration de serveur.

Dans mon code client, j'essaie d'utiliser fetch pour faire la même chose, mais j'obtiens l'erreur suivante:

Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur le .__ demandé. Ressource. Origin ' http: // localhost: 3000 ' n'est donc pas autorisé accès. Si une réponse opaque répond à vos besoins, définissez le .__ de la demande. mode to 'no-cors' pour récupérer la ressource avec CORS désactivé.

J'essaie donc de transmettre un objet, à mon Fetch, qui désactivera CORS, comme ceci:

fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'})
  .then(blob => blob.json())
  .then(data => {
    console.table(data);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });

Curieusement, l’erreur que j’obtiens est en fait une erreur de syntaxe avec cette fonction. Je ne suis pas sûr que ma fetch réelle soit cassée, car lorsque je supprime l'objet {mode: 'no-cors'} et que je le fournis avec une URL différente, il fonctionne parfaitement.

J'ai également essayé de transmettre l'objet { mode: 'opaque'}, mais cela renvoie l'erreur d'origine ci-dessus.

Je crois que tout ce que j'ai à faire est de désactiver CORS. Qu'est-ce qui me manque?

reactjscorsfetch-apicreate-react-app
54
dwww

La solution très simple (2 min pour configurer) consiste à utiliser local-ssl-proxy package de npm

L'usage est simple:
1. Installez le paquet: npm install -g local-ssl-proxy
2. Pendant que vous exécutez votre local-server, masquez-le avec le local-ssl-proxy --source 9001 --target 9000

P.S: Remplacez --target 9000 par le -- "number of your port" et --source 9001 par --source "number of your port +1" 

0
volna

La solution simple: Ajoutez ce qui suit au sommet du fichier php à partir duquel vous demandez les données.

header("Access-Control-Allow-Origin: *");

0
Really Nice Code

Donc, si vous êtes comme moi et que vous développez un site Web sur localhost où vous essayez d'extraire des données de Laravel API et de les utiliser dans votre Vue front-end, et que vous voyez ceci problème, voici comment je l'ai résolu:

  1. Dans votre projet Laravel, exécutez la commande php artisan make:middleware Cors. Cela créera app/Http/Middleware/Cors.php pour vous.

  2. Ajoutez le code suivant dans la fonction handles dans Cors.php:

    return $next($request)
    ->header('Access-Control-Allow-Origin', '*')
    ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

  3. Dans app/Http/kernel.php, ajoutez l'entrée suivante dans le tableau $routeMiddleware:

    ‘cors’ => \App\Http\Middleware\Cors::class

    (Il y aurait d'autres entrées dans le tableau comme auth, guest etc. Assurez-vous aussi que vous faites cela dans app/Http/kernel.php car il y a un autre kernel.php dans Laravel)

  4. Ajoutez ce middleware lors de l'enregistrement de route pour toutes les routes où vous souhaitez autoriser l'accès, comme ceci:

    Route::group(['middleware' => 'cors'], function () {
    Route::get('getData', 'v1\MyController@getData');
    Route::get('getData2', 'v1\MyController@getData2');
});
  5. Dans Vue front-end, assurez-vous d'appeler cette API dans la fonction mounted() et non dans data(). Assurez-vous également que vous utilisez http:// ou https:// avec l'URL de votre appel fetch().

Crédits complets à Pete Houston article de blog .

0
dotNET

La solution pour moi était juste de le faire côté serveur

J'ai utilisé la bibliothèque C # WebClient pour récupérer les données (dans mon cas, il s'agissait de données image) et les renvoyer au client. Il y a probablement quelque chose de très similaire dans votre langage côté serveur choisi.

//Server side, api controller

[Route("api/ItemImage/GetItemImageFromURL")]
public IActionResult GetItemImageFromURL([FromQuery] string url)
{
    ItemImage image = new ItemImage();

    using(WebClient client = new WebClient()){

        image.Bytes = client.DownloadData(url);

        return Ok(image);
    }
}

Vous pouvez le modifier en fonction de votre cas d'utilisation. Le point principal est que client.DownloadData() a fonctionné sans erreur CORS. En règle générale, les problèmes CORS ne concernent que des sites Web. Il est donc judicieux de faire des requêtes "intersites" à partir de votre serveur.

Ensuite, l'appel d'extraction de React est aussi simple que: 

//React component

fetch(`api/ItemImage/GetItemImageFromURL?url=${imageURL}`, {            
        method: 'GET',
    })
    .then(resp => resp.json() as Promise<ItemImage>)
    .then(imgResponse => {

       // Do more stuff....
    )}
0
Stuart Aitken