프론트 엔드 페치 API로 적절한 응답 헤더 형식 설정

M66 2025-05-28

프론트 엔드 개발에서 Fetch API는 HTTP 요청을 보내고 응답을 얻는 데 사용되는 매우 일반적인 인터페이스입니다. 프론트 엔드 및 백엔드가 데이터를 올바르게 교환 할 수 있도록 응답 헤더의 구성이 중요합니다. PHP는 헤더 기능을 제공하여 HTTP 응답 헤더를 설정합니다. 프론트 엔드 페치 API와 함께 사용하면 올바른 구성을 통해 응답 형식 및 크로스 도메인 요청과 같은 문제를 해결할 수 있습니다.

1. 헤더 기능을 사용하여 PHP에서 응답 헤더를 설정합니다.

PHP에서 헤더 기능은 원시 HTTP 응답 헤더를 브라우저로 보내는 데 사용됩니다. 일반적으로 콘텐츠 유형 (콘텐츠 유형), 캐시 제어, 크로스 도메인 리소스 공유 (CORS) 및 기타 정보를 설정하는 데 사용됩니다.

 <?php
// 응답 헤더를 설정하십시오，응답 내용 유형을 다음과 같이 선언하십시오 JSON
header('Content-Type: application/json');

// 설정 CORS 머리，특정 도메인 이름의 요청을 허용합니다
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type');

// 시뮬레이션 리턴 JSON 데이터
$response = ['message' => 'Hello, World!'];
echo json_encode($response);
?>

위의 PHP 코드에서 헤더 함수는 JSON 형식으로 반응의 컨텐츠 유형을 지정하는 것을 포함하여 응답 헤더를 설정하는 데 사용됩니다. Access-Control-Ollow-Origin을 통해 크로스 도메인 액세스 규칙을 설정하여 모든 출처의 요청을 허용합니다. 현재 프론트 엔드는 Fetch API를 통해 정상적으로 응답 데이터를 수신 할 수 있습니다.

2. Fetch API와 함께 요청을 보냅니다

프론트 엔드 코드에서 Fetch API를 사용하여 HTTP 요청을 보내고 응답을받습니다. Fetch 의 기본 구문은 다음과 같습니다.

 fetch('http://m66.net/api/example.php', {
  method: 'GET', // 요청 방법
  headers: {
    'Content-Type': 'application/json' // 헤더를 요청하십시오，Send를 지정하십시오 JSON 格式的데이터
  }
})
.then(response => response.json()) // 응답을 구문 분석합니다 JSON 데이터
.then(data => console.log(data)) // 산출响应데이터
.catch(error => console.error('Error:', error)); // 오류 처리

위의 코드는 PHP 백엔드에 GET 요청을 보냅니다. 요청 헤더의 컨텐츠 유형 이 Application/JSON임을 지정하여 FrontEnd가 JSON 형식의 응답 데이터를 수신하려고합니다.

3. 크로스 도메인 문제를 해결하십시오

현재 끝과 백엔드가 동일한 도메인 이름이나 포트에 있지 않으면 일반적으로 크로스 도메인 요청 문제가 발생합니다. Fetch API가 크로스 도메인 요청을 올바르게 처리하려면 백엔드는 응답 헤더에 CORS (크로스 도메인 리소스 공유) 관련 설정을 추가해야합니다.

PHP에서는 헤더 기능을 통해 액세스-제어-홀로-오리핀 과 같은 CORS 헤더를 설정하여 크로스 도메인 액세스를 허용 할 수 있습니다. 예를 들어:

 // 모든 출처에서 크로스 도메인 요청을 허용합니다
header('Access-Control-Allow-Origin: *');
// 允许요청 방법 GET、POST、PUT、DELETE
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
// 允许헤더를 요청하십시오中包含 Content-Type
header('Access-Control-Allow-Headers: Content-Type');

이러한 설정은 프론트 엔드 페치 요청을 브라우저에서 차단하지 않고 성공적으로 전송되고 데이터를 가져올 수 있도록합니다.

4. 완전한 예

프론트 엔드와 백엔드 코드를 결합하여 프론트 엔드 페치 API와 함께 PHP의 헤더 기능을 사용하여 응답 헤더 형식을 올바르게 설정하는 방법을 보여주는 완전한 예제를 얻을 수 있습니다.

PHP 코드 :

 <?php
// 응답 헤더를 설정하십시오
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type');

// 시뮬레이션 리턴 JSON 데이터
$response = ['message' => 'Hello, World!'];
echo json_encode($response);
?>

자바 스크립트 코드 :

 fetch('http://m66.net/api/example.php', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data)) // 산출：{ message: "Hello, World!" }
.catch(error => console.error('Error:', error));

이러한 방식으로 프론트 엔드와 백엔드 간의 통신은 원활하게 진행되어 데이터를 JSON 형식으로 올바르게 전송하고 크로스 도메인 액세스 문제를 해결할 수 있습니다.

요약

이 기사에서는 프론트 엔드의 Fetch API를 사용하여 PHP에서 응답 헤더 형식을 설정하여 응답 데이터를 프론트 엔드로 올바르게 전달할 수 있는지 확인합니다. 컨텐츠 유형 및 액세스 제어-홀로-오리핀과 같은 적절한 응답 헤더를 구성하면 크로스 도메인 요청 및 응답의 정확성을 보장 할 수 있습니다. 프론트 및 백엔드 통신과 관련된 응용 프로그램을 개발하는 경우 이러한 응답 헤더를 구성하는 방법을 이해하면 데이터 상호 작용을 원활하게 완료하는 데 도움이됩니다.

header