Tester la connexion entre mon interface React locale et le serveur Node.JS

Question

J'ai créé un serveur node.JS Express qui envoie du JSON à mon frontend à l'aide de l'API. J'ai terminé le backend et l'ai mis sur un serveur AWS. Maintenant, je veux juste travailler sur l'interface React. Je commence à réagir sur localhost:3000 et fais une requête au serveur AWS, mais j'obtiens une erreur CORS me disant que localhost:3000 n'a pas l'autorisation d'envoyer des requêtes à ce serveur.

从源“http://localhost:3000”获取“http://www.myawssever.fr:4000/api-url/”的访问已被 CORS 策略阻止：无“访问控制” -Allow-Origin'标头存在于请求的资源上。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

J'ai essayé plusieurs solutions pour autoriser localhost:3000 mais je ne pense pas que le problème vienne de là, car pour le serveur localhost:3000 c'est l'adresse elle-même ! Savez-vous comment je peux tester mon dos depuis mon ordinateur (React sur localhost:3000) en envoyant une requête au serveur (AWS) ?

Answer 1

Voici les étapes combinées pour résoudre les erreurs CORS et activer la communication entre l'interface React et les serveurs AWS

在您的 AWS 服务器上配置 CORS

Tout d'abord, vous devez configurer le serveur pour qu'il s'exécute sur 响应中包含适当的CORS标头. Vous devez ajouter l'en-tête "Access-Control-Allow-Origin" avec la valeur "http://localhost:3000" pour autoriser les requêtes de votre application React.

配置CORS的具体方法

La méthode exacte de configuration de CORS dépend de la technologie de serveur que vous utilisez (par exemple Express, Apache, Nginx). Par exemple, si vous utilisez Express, vous pouvez utiliser le middleware cors. Voici un exemple de configuration de CORS à l'aide d'Express :

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({ origin: 'http://localhost:3000' }));

// Rest of your server code...

app.listen(4000, () => {
  console.log('Server running on port 4000');
});

重新启动您的 AWS 服务器

Après avoir configuré CORS, redémarrez le serveur AWS pour appliquer les modifications.