FIX: Angular에서 access-control-allow-origin 헤더 오류 없음

Angular 개발자가 일상 작업에서 접할 수있는 가장 일반적인 오류 메시지 중 하나는 다음과 같습니다. 요청 된 리소스에 access-control-allow-origin 헤더가 없습니다..

이것은 특정 Angular 문제가 아니라 CORS (Cross-Origin Resource Sharing) 헤더 문제. 백엔드 서버가 다른 포트 또는 도메인에서 작동하도록 구성되었음을 의미 할 수 있습니다.

---

Windows 10에서 액세스 제어 없음 오류를 수정하려면 어떻게해야합니까?

1. 서버 수준에서 변경

서버에 액세스 할 수있는 경우 다음을 추가하여 CROS 요청을 활성화하십시오. 액세스 제어 허용 출처: * 머리글. 그 후 구성 cors 항목, 아래 system.webServer 에 web.config 아래 예제와 같이 파일.

• ”1.0″?
• enabled ="진실">
• 원산지 =“ https://someorigin.domain.com”>
• 방법 ="가져 오기"/>
• 방법 ="머리"/>
• </system.webServer>

여기, cors 허용 할 것이다 가져 오기 과 머리 의 요청 https://someorigin.domain.com/.

또한 사용하는 경우 IIS (인터넷 정보 서비스) 당신은 다운로드해야 할 것입니다 IIS CORS 모듈.

* 대신 도메인 또는 도메인 목록을 지정해야합니다. 그렇지 않으면 서버에 대한 교차 출처 요청이 어디서나 활성화됩니다.

의 위에 Apache, 구성 파일에 다음 줄을 추가해야합니다. 헤더 세트 Access-Control-Allow-Origin‘*’. 다시 말하지만 '*'를 요청이 생성되는 소스 목록으로 바꾸는 것이 좋습니다.

---

2. 자신의 프록시 서버 실행

1. 먼저 루트 Angular 폴더에 다음과 같은 프록시 구성 파일을 만듭니다. src / proxy.conf.json, 다음 코드를 작성하십시오.
   • { "/ api":
   • "표적":" http://localhost: 6000 ","secure ": false}
   • }
2. 둘째, 중앙ular.json파일, 추가 proxyConfig옵션 서브 표적:
   • "서브": {
   • "빌더":" ",
     
   • "옵션":{"proxyConfig":"src / proxy.conf.json"}
     
   • }
3. 이제 현재 구성을 ng 서브 명령.

프록시 서버는 요청을 원격 서버로 전달합니다. 다음으로 프록시 서버를 구성하는 방법을 살펴 보겠습니다.

Angular의 데이터 요청은 다음 위치와 같이 포트 4200에서 localhost에 대한 API 호출입니다.

• http://localhost: 4200 / api / datareq.

그러나 위의 예에서는 요청 된 데이터가 이 위치 :

• http://localhost: 6000 / api / datareq.

---

좋은 프록시 솔루션에 관심이 있으십니까? 이 전용 도구 목록을 확인하세요.

---

3. 디브라우저에서 동일한 출처 정책을 사용할 수 있습니다.

노트 : 이 특정 방법은 브라우저 (및 시스템)가 주요 보안 위험에 노출 될 수 있으므로 권장되지 않습니다.

다른 모든 것이 작동하지 않으면 브라우저에서 동일한 출처 정책을 비활성화 할 수 있습니다. 그러나 브라우저 (및 시스템)가 주요 보안 위험에 노출 될 수 있으므로주의하십시오.

에 대한 구글 크롬, Windows 10에서 관리자 권한으로 명령 프롬프트를 열고 다음 명령을 실행합니다.

C: 프로그램 파일 (x86) GoogleChromeApplicationchrome.exe "--disable-web-security --disable-gpu --user-data-dir = ~ / chromeTemp..

결론적으로, 요청 된 리소스에 access-control-allow-origin 헤더가 없습니다. 오류 메시지는 서버 측 문제입니다.

Angular 개발자의 경우 서버 구성을 수정하거나 프록시 서버를 사용하면 잘 작동합니다.

아래 댓글 섹션에서이 가이드에 대해 어떻게 생각하는지 알려주세요.

---

---