크로스 도메인에서 망설이는 이야기
1.Ajax란?
우선은 Ajax. 실은, 지금까지 Ajax를 거기까지 이해하고 있지 않았다. (동기 통신으로 데이터 가져오는 업무 시스템 개발뿐이었을지도 모른다.) jquery로 쓰면 간단하네요.
【Ajax】
① Asynchronous Javascript + XML의 약어.
② 페이지를 전환하지 않고 페이지의 일부를 동적으로 대체할 수 있는 기술
샘플 그려 보았습니다.
jquery로 쓰면 간단합니다만, 이번은 굳이 Native로.
<script>
window.onload = function () {
var xhr = new XMLHttpRequest();
xhr.addEventListener('loadend', function () {
if (xhr.status === 200) {
console.log(xhr.response);
} else {
console.error(xhr.status + ' ' + xhr.statusText);
}
});
xhr.open('GET', 'http://localhost:3000/api/test/');
xhr.send(null);
}
</script>
● XMLHttpRequest는, 「HTTP 프로토콜을 사용해 통신해, 텍스트 형식이나 XML 형식의 데이터를 송수신하는 오브젝트」평소는 jquery로 써 버리고 있습니다만, 내부적으로 무엇을 하고 있는지는 실제로 써 봐 그렇지 않으면 모르고 실제 참조를 보는 것이 중요합니다.
《참고》XMLHttpRequest - Web API 인터페이스 | MDN
htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / 두 cs / u b / api / XMLH tp Rekue St
2. 크로스 도메인 제약이란?
간단한 샘플을 만들어 보았습니다. 구성은 이런 느낌.
【프런트】
HTML5 + Javascript로 Ajax 구현. 아래에서 설명하는 간단한 API 서버에 GET 요청
보내고 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
window.onload = function () {
// HTTPプロトコルを使用して通信し、テキスト形式やXML形式のデータを送受信するオブジェクト
var xhr = new XMLHttpRequest();
xhr.addEventListener('loadend', function () {
if (xhr.status === 200) {
console.log(xhr.response);
} else {
console.error(xhr.status + ' ' + xhr.statusText);
}
});
xhr.open('GET', 'http://localhost:3000/api/test/');
xhr.send(null);
}
</script>
</body>
</html>
【서버 사이드】
《참고》 원숭이에서도 알 수 있는 Express에서 jsonAPI 서버를 만드는 방법
htps : // 코 m / ぇ 아후 78 / ms / 73 c7160d002 4989416
Node.js와 Express로 간단한 API 서버를 만듭니다. 특히 DB는 준비되어 있지 않습니다.
URL에 액세스하면 json을 반환하는 간단한 코드입니다. 거의 참고 링크의 샘플 대로입니다.
api
┣ app.js
┣ package.json
// ライブラリ読み込み
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
//body-parserの設定
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
var port = process.env.PORT || 3000; // port番号を指定
// GET http://localhost:3000/api/test/
app.get('/api/test/',function(req,res){
res.json({
message:"Hello,world"
});
});
//サーバ起動
app.listen(port);
console.log('listen on port ' + port);
HTML을 브라우저에서 여는 순간에 Ajax가 실행되기 때문에,
본래라면 api의 결과가 돌아올 것입니다만. 이러한 오류가.
뭐야? 라고 생각해 조사하면(자), XMLHttpRequest의 호출은, 동일 도메인으로부터 밖에 할 수 없게 되어 있다고 하는 것. 프런트 엔드와 백엔드를 다른 응용 프로그램에서 디버깅하는 경우 동일한 포트 번호를 사용할 수 없으므로 다른 origin으로 인식되어 오류가 발생했습니다.
※크로스 오리진의 제약은, 브라우저의 주소 바에 표시되는 URL 과 Javascript로부터 액세스 되는 URL을 비교해, 프로토콜, 도메인, 포트 의 어느 쪽인가가 다르면 다른 오리진이라고 하게 된다고 합니다. 도메인이 같아도 한쪽만 https 이거나, 포트 번호가 다른 경우는 다른 오리진이라고 판단되는 것 같다.
참고 사이트를 많이 붙여 둡니다.
《참고》
【해설 첨부】chrome로 XMLHttpRequest를 로컬의 파일로 실시하는 방법
htps : // 이 m / g 여 w c / ms / 919 7 2 665557 d9cf4
크로스 도메인 액세스를 이해하고 웹 API를 즐겁게 사용하세요 - SlideShare
htps //w w. s에서 멋지다. 네 t / t t p c와 ry / u b ap-34814937
이것을 모르고, 도메인 차이의 Ajax 통신을 구현해 버려 고생했습니다. .
Reference
이 문제에 관하여(크로스 도메인에서 망설이는 이야기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/takumi_links/items/7cef341017152ce86297
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<script>
window.onload = function () {
var xhr = new XMLHttpRequest();
xhr.addEventListener('loadend', function () {
if (xhr.status === 200) {
console.log(xhr.response);
} else {
console.error(xhr.status + ' ' + xhr.statusText);
}
});
xhr.open('GET', 'http://localhost:3000/api/test/');
xhr.send(null);
}
</script>
간단한 샘플을 만들어 보았습니다. 구성은 이런 느낌.
【프런트】
HTML5 + Javascript로 Ajax 구현. 아래에서 설명하는 간단한 API 서버에 GET 요청
보내고 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
window.onload = function () {
// HTTPプロトコルを使用して通信し、テキスト形式やXML形式のデータを送受信するオブジェクト
var xhr = new XMLHttpRequest();
xhr.addEventListener('loadend', function () {
if (xhr.status === 200) {
console.log(xhr.response);
} else {
console.error(xhr.status + ' ' + xhr.statusText);
}
});
xhr.open('GET', 'http://localhost:3000/api/test/');
xhr.send(null);
}
</script>
</body>
</html>
【서버 사이드】
《참고》 원숭이에서도 알 수 있는 Express에서 jsonAPI 서버를 만드는 방법
htps : // 코 m / ぇ 아후 78 / ms / 73 c7160d002 4989416
Node.js와 Express로 간단한 API 서버를 만듭니다. 특히 DB는 준비되어 있지 않습니다.
URL에 액세스하면 json을 반환하는 간단한 코드입니다. 거의 참고 링크의 샘플 대로입니다.
api
┣ app.js
┣ package.json
// ライブラリ読み込み
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
//body-parserの設定
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
var port = process.env.PORT || 3000; // port番号を指定
// GET http://localhost:3000/api/test/
app.get('/api/test/',function(req,res){
res.json({
message:"Hello,world"
});
});
//サーバ起動
app.listen(port);
console.log('listen on port ' + port);
HTML을 브라우저에서 여는 순간에 Ajax가 실행되기 때문에,
본래라면 api의 결과가 돌아올 것입니다만. 이러한 오류가.
뭐야? 라고 생각해 조사하면(자), XMLHttpRequest의 호출은, 동일 도메인으로부터 밖에 할 수 없게 되어 있다고 하는 것. 프런트 엔드와 백엔드를 다른 응용 프로그램에서 디버깅하는 경우 동일한 포트 번호를 사용할 수 없으므로 다른 origin으로 인식되어 오류가 발생했습니다.
※크로스 오리진의 제약은, 브라우저의 주소 바에 표시되는 URL 과 Javascript로부터 액세스 되는 URL을 비교해, 프로토콜, 도메인, 포트 의 어느 쪽인가가 다르면 다른 오리진이라고 하게 된다고 합니다. 도메인이 같아도 한쪽만 https 이거나, 포트 번호가 다른 경우는 다른 오리진이라고 판단되는 것 같다.
참고 사이트를 많이 붙여 둡니다.
《참고》
【해설 첨부】chrome로 XMLHttpRequest를 로컬의 파일로 실시하는 방법
htps : // 이 m / g 여 w c / ms / 919 7 2 665557 d9cf4
크로스 도메인 액세스를 이해하고 웹 API를 즐겁게 사용하세요 - SlideShare
htps //w w. s에서 멋지다. 네 t / t t p c와 ry / u b ap-34814937
이것을 모르고, 도메인 차이의 Ajax 통신을 구현해 버려 고생했습니다. .
Reference
이 문제에 관하여(크로스 도메인에서 망설이는 이야기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/takumi_links/items/7cef341017152ce86297텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
