CORS: PHP: 실행 전 요청에 대한 응답이 실패했습니다. 원산지를 허용합니다

Question

따라서 CORS 게시물이 많이 있다는 것을 알고 있으며 이를 추가하고 있지만 도움이 될 만한 답변을 찾을 수 없습니다. 그래서 저는 PHP API를 사용하는 Angular 4 애플리케이션을 구축하고 있습니다. app.example.com의 앱과 api.example.com의 API를 사용하여 도메인에 문제 없이 작동합니다. 다음 오류가 발생하므로 로그인 정보를 전달하세요.

<인용문>

XMLHttpRequest는 http://api.example.com/Account/Login을 로드할 수 없습니다. 실행 전 요청에 대한 응답이 액세스 제어 확인에 실패했습니다: 아니요 요청에 'Access-Control-Allow-Origin' 헤더가 있습니다. 자원. 따라서 소스 "http://app.example.com"은 허용되지 않습니다. 입장.

내 PHP 代码如下所示：

$http_origin = $_SERVER['HTTP_ORIGIN'];

$allowed_domains = 배열(
    'http://example.com',
    'https://example.com',
    'http://app.example.com',
    'https://app.example.com',
    'http://www.example.com',
    'https://www.example.com'
);

if (in_array(strtolower($http_origin), $allowed_domains))
{  
    // header("액세스 제어-허용-원본: *");
    header("액세스 제어-허용-원본: $http_origin");
    header('액세스 제어-허용 자격 증명: true');
    header('액세스 제어-최대 연령: 86400');
}

// OPTIONS 요청 중에 액세스 제어 헤더가 수신됩니다.
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
        header("액세스 제어 허용 방법: GET, POST, OPTIONS");
        header("액세스 제어-허용 헤더: 승인, 콘텐츠 유형, 승인, 원본");
    종료(0);
}

내가 좋아하는 Angular 帖子如下所示：

공개 로그인(login: Login): Observable<LoginResponse> {
    let headers = 새 헤더();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('인증', '기본' + btoa(login.Username + ':' + login.Password));
    return this.http.post(this.apiBaseUrl + '/Account/Login', "grant_type=client_credentials", { 헤더: 헤더 })
        .map(응답 => {
            // 코드
        });
}

如果我会得到：

{ "error": "invalid_client", "error_description": "클라이언트 자격 증명을 헤더나 본문에서 찾을 수 없습니다." }

我尝试将 출처 设置为 '*' 只是为了测试并查看这是否是问题的核心，但它仍然以同样的方式失败。

编辑 只是根据以下信息进行更new。更改标头中的大小写没有任何效果，并且从 if 语句中提取代码也没有任何效果。

;

我俇告诉我的实时应用程序转到本地 api 来调试 php,并且 php 正재按预期工作。它设置标头并将其放入每个 if语句中。

编辑镜头 2 我确实需要一些帮助，如果有人有任何想法，我将不常感激。

편집 샷 3 PHP 대신 .htaccess에 모든 헤더 항목을 설정하면 통과할 수 있습니다. 하지만 이제 위에 나열된 오류가 발생합니다. 이는 Postman을 사용할 때 항상 발생하지만 실제 웹사이트를 사용할 때 발생하는 오류입니다.

{"error":"invalid_client","error_description":"헤더 또는 본문에서 클라이언트 자격 증명을 찾을 수 없습니다."}

내 응답 헤더는 다음과 같습니다

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:인증, 콘텐츠 유형, 승인, 출처
액세스 제어 허용 방법:GET, POST, OPTIONS
Access-Control-Allow-Origin:*

작동하게 되면 *에서 내 도메인으로 변경하겠습니다. 하지만 지금은 *로 남겨둡니다.

요청 시 내 헤더입니다.

Answer 1

저의 비슷한 경우에는 Angular 프론트엔드와 Php 백엔드가 아래 코드에 도움이 되었습니다. 먼저 헤더를 보냅니다:

으아아아

그 이후에는 옵션 요청을 무시할 수 있습니다.

으아아아

이 접근 방식은 Angular에 포함된 요청 메서드 "게시" 및 "삭제"를 처리하는 데 도움이 되었습니다.

Answer 2

좋아요, 최근에 비슷한 문제가 있었는데 .htaccess 없이 백엔드에서만 모든 문제를 해결했습니다.

브라우저가 서버 간 요청을 보낼 때 먼저 OPTIONS 요청을 보내 해당 요청이 유효한지, "실제" 요청을 보낼 수 있는지 확인합니다. OPTIONS로부터 올바르고 유효한 응답을 받으면 "실제" 요청이 전송됩니다.

이제 백엔드의 두 요청 모두에 대해 콘텐츠 유형, 허용 원본, 허용 헤더 등 올바른 헤더가 반환되는지 확인해야 합니다.

백엔드의 OPTIONS 요청에서 애플리케이션이 애플리케이션의 전체 흐름을 계속하는 대신 헤더를 반환하고 응답을 반환하는지 확인하세요.

"실제" 요청에서는 올바른 헤더와 일반 응답 본문을 반환해야 합니다.

예:

으아악

기억해야 할 사항:

• 사용하는 경우: "Access-Control-Allow-Credentials" = true "Access-Control-Allow-Origin"이 "*"가 아닌지 확인하고 올바른 도메인으로 설정해야 합니다! (여기서 피가 많이 흘렀어요 :)

• "Access-Control-Allow-Headers"에서 얻을 수 있는 허용 헤더를 정의하세요. 정의하지 않으면 요청이 실패합니다

• "Authorization: Bearer"를 사용하는 경우 "Access-Control-Allow-Headers"에도 "Authorization"이 포함되어야 합니다. 그렇지 않으면 요청이 실패합니다