web-dev-qa-db-fra.com

Problèmes de débogueur JS natif avec CORS - iOS

J'ai un problème avec le débogueur JS natif réactif sur iOS. L'erreur se produit lorsque j'essaie de déboguer mon application à l'aide de l'outil de débogage JS. J'ai essayé différentes solutions sur le Web sans succès. Quelqu'un a-t-il rencontré cette erreur et réussi à la corriger?

Réplication:

1) Exécutez l'application de développement sur un véritable appareil iOS, qui charge le bundle JS à partir de http://172.16.23.27.xip.io:8081/index.delta?platform=ios&dev=true&minify=false

2) Activez les outils de débogage JS Remote, ce qui ouvre http: // localhost: 8081/debugger-ui / dans Chrome.

3) Recharger les bundles et Chrome DevTools affiche l'erreur suivante:

Échec du chargement http://172.16.23.27.xip.io:8081/index.delta?platform=ios&dev=true&minify=false : No 'Access-Control -L'en-tête Allow-Origin est présent sur la ressource demandée. L'origine ' http: // localhost: 8081 ' n'est donc pas autorisée à accéder. Si une réponse opaque répond à vos besoins, définissez le mode de la demande sur "no-cors" pour récupérer la ressource avec CORS désactivé. (index): 188 non capturé (en promesse) TypeError: échec de la récupération 

"react": "16.2.0",
"react-native": "0.52.1"
react-nativelocalhostremote-debugging
11
Diego Oriani

Installer Allow-Control-Allow-Origin: * chrome. Il ajoute CROS à l'en-tête de réponse.

8
Pir Shukarullah Shah

Essayez d'utiliser http://172.16.23.27.xip.io:8081/debugger-ui/ pour le débogage.

ou

  1. ouvert /node_modules/metro/src/Server\index.js

  2. trouver _processDeltaRequest

      mres.setHeader(FILES_CHANGED_COUNT_HEADER, String(output.numModifiedFiles));
  mres.setHeader('Content-Type', 'application/javascript');
  mres.setHeader('Content-Length', String(Buffer.byteLength(output.bundle)));
+ mres.setHeader('Access-Control-Allow-Origin', '*');
  mres.end(output.bundle);
13
justjavac

Juste pour ajouter à cela, si quelqu'un fait du développement sur iOS, alors Android (ou vice versa) ..

Si vous obtenez ce message et qu'il fonctionnait auparavant; par exemple, je travaillais avec un projet iOS, puis j'ai fermé mon Metro Bundler, ouvert cmd et créé pour Android. Mon débogueur fonctionnait auparavant avec mon projet Android, mais après ce processus, j'ai reçu le problème CORS.

Fermez simplement l'onglet du débogueur dans Chrome et ouvrez-le à nouveau dans le menu de développement React-Native. Reconstruisez le projet et bon hop! Si vous êtes dans la situation où cela a fonctionné, alors ceci que l'approche pour vous aussi.

8
JRK