2
votes

Erreur de demande CORS (réaction du passeport natif / laravel)

J'ai créé une application mobile qui utilise une API back-end. J'utilise Fetch api sur JS pour faire mes requêtes. Cependant, j'obtiens une erreur CORS

var data = new FormData();

        data.append('grant_type', 'password');
        data.append('client_id', '2');
        data.append('client_secret', 'secret_token');
        data.append('scope', '*');

        data.append('username', 'mail');
        data.append('password', 'pwd');


        var link = (mydomain in https) + '/oauth/token';
        fetch(link, config)
            .then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson);

            })
            .catch(err => {
                console.log(err);
            })

J'ai essayé ce qui suit:

A / Dans mon .htaccess

    public function handle($request, Closure $next)
    {
                return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }

Cela a eu pour effet au moins de laisser passer ma requête GET.

B / dans mon index.php

        Route::group([ 'middleware' => 'cors'], function() {
            Passport::routes();
        });

    Passport::routes(null, ['middleware' => [ \Barryvdh\Cors\HandleCors::class ]]);

Même effet que .htaccess, seule la requête GET passe, avec OPTIONS. J'ai également vu que mon Access-Control-Allow-Origin serait "*, null" et j'obtiendrais une erreur indiquant qu'un seul est autorisé.

C. https://github.com/barryvdh/laravel-cors Dans AuthServiceProvider, j'ai essayé les deux. Un seul à la fois, pas en même temps.

header("Access-Control-Allow-Origin: *")
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 1000");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");

D. Créé un middle personnalisé avec ce code

 RewriteEngine On
 RewriteCond %{HTTPS} off
 RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]]
 <FilesMatch ".(ttf|otf|eot|woff)$">
 <IfModule mod_headers.c>
 Header set Access-Control-Allow-Origin "*"
 Header set Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"
 Header set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With, token"
 Header set Access-Control-Allow-Credentials "true"
 </IfModule>

J'ai vidé mon $ _SERVER et je n'ai pas trouvé le HTTP_ORIGIN, HTTP_REFERER. J'ai eu mon HTTP_REMOTE_ADDR

Ce qui est encore plus frustrant, c'est que mon application fonctionnait correctement, et j'ai soudainement commencé à avoir le problème (back-end hébergé sur bluehost)

Edit: Exemple de demande

Error message: Access to fetch at 'mydomain.com' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

react-native laravel-5

0 commentaires

3 Réponses :

0
votes

Ajoutez l'URL ci-dessous avant votre demande et essayez-la.

URL à ajouter: https://cors-anywhere.herokuapp.com/

par exemple https: //cors-anywhere.herokuapp. com / http: //food2fork.com/api/search? key = yourquery .

S'il vous plaît laissez-moi savoir si cela fonctionne

3 commentaires

J'ai ajouté un exemple de demande. Comment ajouteriez-vous exactement?

Je reçois toujours une méthode 405 non autorisée à ce sujet. Mais cette route est clairement dans la route artisanale de php: list

Je souhaite que je pourrais connaître php, malheureusement je ne sais pas. Mais j'ai pensé à partager ceci qui pourrait vous être utile d'une manière ou d'une autre.

0
votes

Puisque vous avez déjà créé un middleware, ajoutez-y quelques en-têtes et listez le middleware dans votre tableau protected $ middleware dans kernel.php et cela devrait fonctionner. Assurez-vous également que l'URL est correcte.

Créez un middleware cors

 protected $middleware = [
             ...
             \App\Http\Middleware\Cors::class
]

Ensuite, listez le middleware dans la liste globale des middlewares dans app / http / kernel.php

public function handle($request, Closure $next)
    {
        return $next($request)
          ->header('Access-Control-Allow-Origin', '*') //REPLACE STAR WITH YOUR URL
          ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
          ->header('Access-Control-Allow-Headers', 'content-type, authorization, x-requested-with');
    }

0 commentaires

1
votes

Très bizarre mais le problème que j'avais était avec la configuration de mon fetch

Le premier:

    const config = {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          //'Content-Type': 'multipart/form-data;',
          'Authorization': 'Bearer ' + global.token,
        },
        body: data,
       }

Le corrigé

    const config = {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'multipart/form-data;',
          'Authorization': 'Bearer ' + global.token,
        },
        body: data,
       }

Je viens de supprimer le 'Content-Type': 'multipart / form-data;',

0 commentaires