web-dev-qa-db-fra.com

Zeit (Vercel) Échec des requêtes authentifiées sans serveur à cause de CORS

Je ne parviens pas à gérer correctement les problèmes CORS lorsque j'effectue des requêtes PATCH/POST/PUT du navigateur envoyant un en-tête Authorization avec un Bearer token (Cela fonctionne correctement en dehors du navigateur et pour les requêtes GET) dans Zeit Now sans serveur .

J'utilise Auth pour le côté autorisation si cela aide.

Ceci est ma section d'en-têtes now.json, J'ai essayé beaucoup de combinaisons pour celles-ci, mais aucune n'a réussi depuis le navigateur.

Headers in now.json

  1. J'ai essayé d'utiliser le package npm cors sans succès
  2. J'ai essayé d'ajouter routes dans now.json
  3. Tentative de définition des en-têtes en haut de la fonction sans serveur à l'aide de res.addHeader()
  4. J'ai également essayé de gérer la demande OPTIONS manuellement en faisant des variations de ceci:

OPTIONS method custom handling

Enfin, c'est l'erreur que j'obtiens

Access to XMLHttpRequest at 'https://api.example.org/api/users' from Origin 'https://example.org' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Je ne sais pas ce que je me trompe ou comment gérer cela correctement.

javascriptcorsauthorizationserverlessvercel
10
GMaiolo

J'ai des problèmes assez similaires avec la fonction sans serveur CORS et Vercel.

Après beaucoup de processus essayez → échoué , je viens de trouver des solutions pour cela.

Solutions

tldr

La solution la plus simple, en utilisant simplement micro-cors .

Et avoir une implémentation quelque chose comme;

import { NowRequest, NowResponse } from '@now/node';
import microCors from 'micro-cors';

const cors = microCors();

const handler = (request: NowRequest, response: NowResponse): NowResponse => {
  if (request.method === 'OPTIONS') {
    return response.status(200).send('ok');
  }

  // handle incoming request as usual
};

export default cors(handler);

Version plus longue, mais sans nouvelle dépendance

en utilisant vercel.json pour gérer les en-têtes de requête

vercel.json

{
  "headers": [
    {
      "source": "/.*",
      "headers": [
        {
          "key": "Access-Control-Allow-Origin",
          "value": "*"
        },
        {
          "key": "Access-Control-Allow-Headers",
          "value": "X-Requested-With, Access-Control-Allow-Origin, X-HTTP-Method-Override, Content-Type, Authorization, Accept"
        },
        {
          "key": "Access-Control-Allow-Credentials",
          "value": "true"
        }
      ]
    }
  ]
}

Après avoir essayé, il y a 2 clés importantes dans un paramètre ci-dessus,

  1. Vous devez définir Access-Control-Allow-Origin comme ce que vous voulez
  2. Dans Access-Control-Allow-Headers vous devez inclure Access-Control-Allow-Origin dans sa valeur.

puis en fonction sans serveur, vous devez toujours gérer demande de pré-vol également

/api/index.ts

const handler = (request: NowRequest, response: NowResponse): NowResponse => {
  if (request.method === 'OPTIONS') {
    return response.status(200).send('ok');
  }

  // handle incoming request as usual
};

Je suggérerais de lire le code en micro-cors , c'est un code très simple, vous pouvez comprendre ce qu'il va faire en moins de quelques minutes, ce qui ne me préoccupe pas de l'ajouter dans mon dépendance.

1
hamcompe