Ajax 크로스 도 메 인 설정 해결 CORS 응답 헤드 크로스 도 메 인 사례 상세 설명
크로스 소스 자원 공유(CORS)
1.1 CORS 란 무엇 인가
CORS(Cross-Origin Resource Sharing),전역 자원 공유.CORS 는 공식 적 인 크로스 도 메 인 솔 루 션 으로 클 라 이언 트 에서 특별한 조작 을 하지 않 고 서버 에서 처리 하 며 get 과 post 요청 을 지원 하 는 것 이 특징 입 니 다.크로스 도 메 인 자원 공유 기준 에 HTTP 첫 번 째 필드 가 추가 되 었 습 니 다.서버 에서 어떤 소스 사이트 가 브 라 우 저 를 통 해 어떤 자원 에 접근 할 수 있 는 지 설명 할 수 있 습 니 다.
1.2 CORS 는 어떻게 일 합 니까?
CORS 는 응답 헤드 를 설정 하여 브 라 우 저 에 게 이 요청 은 도 메 인 을 넘 을 수 있 도록 합 니 다.브 라 우 저 는 이 응답 을 받 은 후에 응답 을 줄 일 것 입 니 다.
1.3 CORS 의 사용 은?
ajaxDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CORS</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<button> </button>
<div id="result"></div>
<script>
const btn = document.querySelector('button');
btn.onclick = function () {
//1.
const x = new XMLHttpRequest();
//2.
x.open("GET", "http://127.0.0.1:8080/cors-server");
//3.
x.send();
//4.
x.onreadystatechange = function () {
if (x.readyState === 4) {
if (x.status >= 200 && x.status < 300) {
document.getElementById('result').innerText = x.response;
}
}
}
}
</script>
</body>
</html>
server.js
//1. express
const express = require('express');
//2.
const app = express();
//3.
// request
// response
app.all('/cors-server', (request, response)=>{
//
response.setHeader("Access-Control-Allow-Origin", "*");// *
// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); //
// response.setHeader("Access-Control-Allow-Headers", '*');//
// response.setHeader("Access-Control-Allow-Method", '*');// *
// response.setHeader("Access-Control-Allow-Method", 'get');// get
response.send('hello CORS');
});
//4.
app.listen(8080, () => {
console.log(" , 8080 ....");
});
실행 결과:
여기 서 Ajax 해결 크로스 도 메 인 설정 CORS 응답 헤드 구현 크로스 도 메 인 사례 에 대한 상세 한 설명 은 여기까지 입 니 다.더 많은 관련 Ajax 해결 크로스 도 메 인 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
원생 Ajax와 jQuery Ajax의 차이점 예시 분석선언: 이번에 소개한 것은 aax와 백그라운드를 이용하여 데이터 교환을 하는 작은 예이기 때문에 demo는 서버를 통해 열어야 합니다.서버 환경은 구축하기 매우 좋다. 인터넷에서wamp나xampp를 다운로드하여 한 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
