로컬 React 프런트엔드와 Node.JS 서버 간의 연결 테스트

Question

API를 사용하여 JSON을 프런트엔드로 보내는 node.JS Express 서버를 만들었습니다. 백엔드를 완성하고 AWS 서버에 올렸습니다. 이제 저는 React 프론트엔드 작업을 하고 싶습니다. localhost:3000에서 반응을 시작하고 AWS 서버에 요청을 보냈지만 localhost:3000에 해당 서버에 요청을 보낼 권한이 없다는 CORS 오류가 발생했습니다.

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

localhost:3000을 인증하기 위해 여러 솔루션을 시도했지만 거기에서 문제가 발생한다고 생각하지 않습니다. 왜냐하면 서버에 대한 localhost:3000은 주소 자체이기 때문입니다! 서버(AWS)에 요청을 보내 내 컴퓨터(localhost:3000에서 반응)에서 내 백을 테스트하는 방법을 알고 있습니까?

Answer 1

CORS 오류를 해결하고 React 프런트엔드와 AWS 서버 간의 통신을 활성화하기 위한 결합된 단계는 다음과 같습니다

在您的 AWS 服务器上配置 CORS

먼저 响应中包含适当的CORS标头에서 실행되도록 서버를 구성해야 합니다. React 애플리케이션의 요청을 허용하려면 "Access-Control-Allow-Origin" 헤더에 "http://localhost:3000" 값을 추가해야 합니다.

配置CORS的具体方法

CORS를 구성하는 정확한 방법은 사용 중인 서버 기술(예: Express, Apache, Nginx)에 따라 다릅니다. 예를 들어 Express를 사용하는 경우 cors 미들웨어를 사용할 수 있습니다. Express를 사용하여 CORS를 구성하는 방법의 예는 다음과 같습니다.

으아악

重新启动您的 AWS 服务器

CORS를 구성한 후 AWS 서버를 다시 시작하여 변경 사항을 적용하세요.