자바스크립트는 http 요청 헤더를 설정합니다.

JavaScript는 프런트 엔드 개발에 널리 사용되는 언어로, HTTP 요청 헤더를 설정하여 보다 효율적인 네트워크 통신을 달성할 수 있습니다. HTTP 요청 헤더는 HTTP 프로토콜의 일부로, HTTP 요청의 선두에 위치하며 User-Agent, Accept 등과 같은 요청 정보를 전송하는 데 사용됩니다. JavaScript에서는 보안 강화, 캐시 제어, 도메인 간 등과 같은 HTTP 요청 헤더를 설정하여 네트워크 요청을 최적화할 수 있습니다.

이 글에서는 JavaScript에서 HTTP 요청 헤더를 설정하는 방법을 소개합니다.

1. Ajax 요청 헤더 설정

JavaScript에서는 일반적으로 Ajax를 사용하여 네트워크 요청을 합니다. 다음은 간단한 Ajax 요청 예입니다.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成，接收响应数据
    console.log(xhr.status) // HTTP状态码
    console.log(xhr.statusText) // HTTP状态文本
    console.log(xhr.responseText) // 响应数据
  }
}
xhr.open('GET', '/api/data', true); // 发起GET请求，true表示是异步请求
xhr.send();

위 코드에서는 XMLHttpRequest 객체를 통해 GET 요청을 시작하고 onreadystatechange 메서드에서 응답 데이터를 처리합니다. 이 요청이 성공적으로 시작되고 응답 데이터를 얻었지만 HTTP 요청 헤더가 설정되지 않았습니다. Ajax에서는 XMLHttpRequest 객체의 setRequestHeader 메소드를 설정하여 HTTP 요청 헤더를 설정할 수 있습니다. 예:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成，接收响应数据
    console.log(xhr.status) // HTTP状态码
    console.log(xhr.statusText) // HTTP状态文本
    console.log(xhr.responseText) // 响应数据
  }
}
xhr.open('GET', '/api/data', true); // 发起GET请求，true表示是异步请求
xhr.setRequestHeader('Authorization', 'Bearer my_token'); // 设置Authorization请求头
xhr.send();

위 코드에서 Authorization 요청 헤더를 설정하는 코드 줄을 추가했으며 해당 값은 Bearer my_token입니다. 즉, Bearer Token 인증 방법을 사용하여 서버 API에 액세스합니다. 이러한 방식으로 Ajax 요청에 HTTP 요청 헤더를 설정하여 API 인터페이스에 대한 액세스, 인증 정보 전송 등을 용이하게 할 수 있습니다.

2. XHR 요청 헤더 설정

JavaScript에서 XMLHttpRequest 개체는 서버와 상호 작용하는 데 가장 일반적으로 사용되는 도구로, HTTP 헤더 정보를 설정하여 보다 효율적인 네트워크 통신을 달성할 수 있습니다. 다음은 XHR 요청 헤더 설정의 예입니다.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成，接收响应数据
    console.log(xhr.status) // HTTP状态码
    console.log(xhr.statusText) // HTTP状态文本
    console.log(xhr.responseText) // 响应数据
  }
}
xhr.open('POST', '/api/data', true); // 发起POST请求，true表示是异步请求
xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头Content-Type为JSON
xhr.send(JSON.stringify({name: 'Tom'})); // 发送JSON数据

위 코드에서는 XMLHttpRequest 객체를 통해 POST 요청을 시작하고 Content-Type 요청 헤더를 application/json으로 설정하여 JSON 형식을 서버로 쉽게 전송할 수 있도록 했습니다. API. 이러한 방식으로 XHR 요청에 HTTP 요청 헤더를 설정하여 보다 효율적인 네트워크 통신을 달성할 수 있습니다.

3. Fetch 요청 헤더 설정

ES6에서 Fetch는 기본적으로 지원되는 더 강력한 네트워크 요청 API이며, 체인 호출을 지원하며 더 간결합니다. 다음은 간단한 Fetch 요청 예시입니다.

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

위 코드에서는 fetch 함수를 통해 GET 요청을 시작하고 반환된 응답 데이터를 처리합니다. 이 요청이 성공적으로 시작되고 응답 데이터를 얻었지만 HTTP 요청 헤더가 설정되지 않았습니다. Fetch에서는 요청 헤더 개체를 설정하여 HTTP 요청 헤더를 설정할 수 있습니다. 예:

fetch('/api/data', {
  headers: {
    'Authorization': 'Bearer my_token',
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

위 코드에서는 Authorization 및 Content-Type을 포함하는 헤더 요청 헤더 개체를 설정하는 코드 줄을 추가했습니다. API 인터페이스 액세스, 인증 정보 전달, 데이터 유형 지정 등을 용이하게 하는 요청 헤더입니다. 이러한 방식으로 Fetch 요청에 HTTP 요청 헤더를 설정하여 보다 효율적인 네트워크 요청을 달성할 수 있습니다.

요약:

JavaScript에서 HTTP 요청 헤더를 설정하려면 다양한 네트워크 요청 도구에 따라 다양한 설정 방법을 사용해야 합니다. Ajax에서는 XMLHttpRequest 객체의 setRequestHeader 메소드를 통해 HTTP 요청 헤더를 설정하고, Fetch에서는 setRequestHeader 메소드를 통해 HTTP 요청 헤더도 설정하며, HTTP 요청 헤더를 설정하려면 Header 객체를 설정해야 합니다. 어떤 설정 방법을 사용하든 보다 효율적인 네트워크 통신을 위해서는 특정 상황에 따라 적절한 HTTP 요청 헤더를 선택해야 합니다.

위 내용은 자바스크립트는 http 요청 헤더를 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!