Cross-Origin Resource Sharing (CORS)는 웹 페이지가 웹 페이지를 제공한 도메인과 다른 도메인에 요청을 보내는 것을 제한하는 웹 브라우저의 보안 기능입니다. 그러나 때로는 도메인 간 AJAX 요청을 할 때 CORS 오류가 발생할 수 있습니다. 이 문제를 해결하려면 서버 측 PHP 코드를 수정하여 적절한 CORS 헤더를 포함해야 합니다.
다음은 간단한 PHP AJAX 요청의 CORS 오류가 발생하는 예시와 이를 해결하는 방법입니다:
1. 클라이언트 측 자바스크립트 코드 (index.html):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX CORS Example</title>
</head>
<body>
<button id="getData">Get Data</button>
<script>
document.getElementById("getData").addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhr.open("GET", "https://example.com/api/data.php", true);
xhr.send();
});
</script>
</body>
</html>
```
2. CORS 헤더가 없는 서버 측 PHP 코드 (data.php):
```php
<?php
$data = array("message" => "Hello, world!");
header("Content-Type: application/json");
echo json_encode($data);
?>
```
위 코드를 실행하면 서버 측 PHP 코드에 필요한 CORS 헤더가 포함되어 있지 않기 때문에 CORS 오류가 발생할 가능성이 높습니다.
이 문제를 해결하려면 PHP 코드에 다음 CORS 헤더를 추가하십시오:
```php
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
header("Content-Type: application/json");
$data = array("message" => "Hello, world!");
echo json_encode($data);
?>
```
위와 같이 코드를 수정하면 CORS 오류가 해결되어 클라이언트에서 API 요청이 정상적으로 처리됩니다.
'개발' 카테고리의 다른 글
| Spring Boot에서 응답 헤더 서버 이름 설정하는 방법 (0) | 2023.05.05 |
|---|---|
| jQuery Datepicker 날짜 선택 이벤트 예제 (0) | 2023.05.05 |
| jQuery 라이브러리 검색 사이트 추천 (0) | 2023.05.05 |
| Linux에서 백그라운드에서 실행 중인 npm 프로세스 종료하는 방법 (0) | 2023.05.05 |
| Linux에서 Node 모듈 제거하는 방법 (0) | 2023.05.05 |
댓글