web-dev-qa-db-fra.com

react.js | comment se débarrasser d'une erreur d'origine croisée dans Codesandbox

DANS FIREFOX: Lorsque j'exécute mon code, l'erreur typique que je devrais obtenir est: "TypeError: Impossible de lire la propriété 'setState' de undefined", à la place j'ai reçu une erreur d'origine très étrange.

Voici une capture d'écran de l'erreur: http://prntscr.com/iwipnbenter image description here

Erreur Une erreur d'origine croisée a été générée. React n'a pas accès à l'objet d'erreur réel en cours de développement. Voir https://reactjs.org/docs/cross-Origin-errors.html pour en savoir plus information.

voici mon code: https://codesandbox.io/s/4885l37xrw

Comment puis-je éviter l'erreur d'origine croisée dans Codesandbox dans FIREFOX ?

EDIT1: Je sais quel est le bug de code (bind (this)). Je recherche le problème d'erreur cross-Origin firefox. Merci

reactjsamazon-s3codesandbox
7
lito

Il semble que vous devez activer CORS sur votre compartiment S3 qui sert: https://s3-eu-west-1.amazonaws.com/codesandbox-downtime/downtime.json

Pour ce faire, accédez simplement à votre compartiment, puis cliquez sur l'onglet Autorisations, puis dans la zone CORS entrez un document XML avec les autorisations que vous souhaitez. Exemples d'autorisations pour permettre à tout hôte de faire une demande GET:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
2
duhaime

L'erreur croisée d'origine mentionnée dans votre question est un problème ouvert (à partir de décembre 2019) dans le référentiel github de Codesandbox.

Le site Web de Reactjs explique cela à ce sujet sous Erreurs d'origine croisée

À ne pas confondre avec Partage des ressources d'origine croisée

0
mdsadiq

Ajoutez ceci dans le constructeur du fichier API

public function __construct($config = 'rest'){
   header('Access-Control-Allow-Origin: *');
   header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
   header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
      parent::__construct();
    }
0
Amit Kashyap

Vous pouvez utiliser corsproxy pour accéder aux API localhost à partir de vos machines locales.

  1. Vous devez d'abord installer le package corsproxy npm. npm install -g corsproxy

  2. exécuter la commande corsproxy sur le terminal

  3. Il fonctionnera sur http: // localhost: 1337
  4. Maintenant, ce que vous devez faire est d'ajouter votre appel API avec l'URL ci-dessus. Disons que vous devez toucher localhost: 3000/client pour atteindre l'api.

La nouvelle URL sera donc http: // localhost: 1337/localhost: 3000/customer

Cela supprimera l'erreur CORS.

Faites des commentaires sur vos requêtes dans les commentaires.

0
Abhishek Sharma