오류 받기 'Access-Control-Allow-Origin'헤더가 요청 된 리소스에 있습니다.

Question

헤드리스 드루팔 (drupal) 앱을 만들려고합니다. 내가 drupal 8 beckend로 사용하고 프런트 엔드로 반응. 내가 핵심 휴식 서비스 모듈을 사용하여 드루팔 (Drupal 8에서 REST 서비스를 만들었습니다. 문제는 내가 api를 호출 할 때 오류가 발생하는 경우입니다. 예 :

가져 오기 API가 http://192.168.1.246/headless-react/api/events을로드 할 수 없습니다. 프리 플라이트 요청에 대한 응답이 액세스 제어 검사를 통과하지 못합니다. 'Access-Control-Allow-Origin'헤더가 요청 된 자원에 없습니다. 따라서 원점 'http://localhost:3000'은 액세스 할 수 없습니다. 응답에 HTTP 상태 코드 403이 있습니다. 불투명 한 응답이 사용자의 요구를 충족시키는 경우 CORS가 비활성화 된 상태로 자원을 페치하려면 요청 모드를 'no-cors'로 설정하십시오.

cors.config에 대해 services.yml 파일을 구성했지만 여전히 오류가 발생합니다. 누구든지 그것을 해결하는 방법을 어떤 생각을 가질 수 있습니까? 덕분에

Answer 1

확장 기능을 사용 중입니다. 다른 도메인에서 API를 호출했기 때문에이 경고 메시지가 표시되는 이유입니다. 아니면 nginx를 사용할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 2

당신은 도구를 사용하면 ReactJS를 사용하여 프런트 엔드에서 사용하는 구축 할 것을 언급 할 필요가있다. 당신이 웹팩을 사용하고 있다고 가정하면, 당신과 같이, 루트 디렉토리에있는 package.json에 프록시를 추가해야합니다

package.json 예를 들어

... 
"name": "relay-starter-kit", 
"proxy":"<your-base-remote-server-url-here", 
"private": true, 
... 

를 서버 인 경우 https://www.myawesomeserver.com이면 "proxy": "https://www.myawesomeserver.com"입니다.

귀하의 경우 "proxy":"http://192.168.1.246"이 작동해야합니다. 당신이 경로 https://www.myawesomeserver.com/home에 액세스해야하는 경우, 당신은 그냥 집에 대한 요청이 모양을 package.json 에서 프록시의 기본 URL을 데리러 경로와 웹팩을 통과해야 응용 프로그램에서

,

webpack을 실행하면 webpack dev 서버에서 반응 애플리케이션이 실행되고 다른 서버와 통신하려면 webpack이 사용자를 대신하여 요청을해야하기 때문입니다. 웹팩을 사용하지 않는 경우이 방법은 유용하지 않을 수 있습니다.