'XMLHttpRequest가 로드할 수 없습니다. 실행 전 요청에 대한 응답이 액세스 제어 확인을 통과하지 못합니다.' 오류를 해결하는 방법은 무엇입니까?

액세스 제어 거부: 웹 개발에서 CORS 문제 해결

문제:

ngResource를 사용하여 REST API에 액세스하는 경우 Amazon Web Services에서는 다음과 같은 문제가 발생합니다. 오류:

XMLHttpRequest cannot load <url>. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<origin>' is therefore not allowed access.

원인:

이 문제는 CORS(Cross-Origin Resource Sharing) 제한으로 인해 발생합니다. CORS(Cross-Origin Resource Sharing) 제한으로 인해 한 도메인의 웹 애플리케이션이 요청을 할 수 없습니다. 명시적인 내용 없이 다른 도메인으로

솔루션:

CORS 문제를 해결하는 데는 여러 가지 접근 방식이 있습니다.

1. CORS 비활성화:

• Chrome에서 chrome://flags/#disable-web-security를 ​​방문하세요
• "웹 보안 비활성화"를 "활성화"로 설정
• 참고: 이 솔루션은 개발용으로만 사용해야 합니다. 목적.

2. 브라우저 플러그인:

• CORS 차단 해제와 같이 CORS 검사를 비활성화하는 브라우저 플러그인을 설치합니다.

3. 프록시 서버:

• Nginx와 같은 프록시 서버를 사용하여 교차 출처 요청을 처리합니다. 이렇게 하면 브라우저는 요청이 로컬 호스트에서 온다고 믿게 됩니다.

4. 서버 구성:

• 응답에 Access-Control-Allow-Origin 헤더를 추가하도록 서버를 구성하세요. 서버에 따른 구체적인 지침은 CORS 활성화 웹사이트를 참조하세요.

5. 약속이 있는 HTTP 예:

const makeRequest = (url, options) => {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open(options.method, url);
    request.setRequestHeader('Accept', 'application/json');

    request.onload = () => {
      if (request.status >= 200 && request.status < 300) {
        resolve(request.response);
      } else {
        reject({
          status: request.status,
          statusText: request.statusText
        });
      }
    };

    request.onerror = () => {
      reject({
        status: request.status,
        statusText: request.statusText
      });
    };

    request.send(options.body);
  });
};

위 내용은 'XMLHttpRequest가 로드할 수 없습니다. 실행 전 요청에 대한 응답이 액세스 제어 확인을 통과하지 못합니다.' 오류를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!