http์์ฒญ์ ์ฒ๋ฆฌํ์ฌ ์๋ง์ ์๋ต์ ๋ณด์ฌ์ฃผ๋ ํ๋ก๊ทธ๋จ์ ์น ์๋ฒ๋ผ๊ณ ํจ
=== Cross-origin resource sharing
์ด์ ์๋ ์๋ฒ์์ ๋ค์ด๋ก๋๋ ํด๋ผ์ด์ธํธ์ผ๋ก ํต์ ํ์์ผ๋, ์น์ฑ์ด ๊ณ ๋ํ๋๋ฉด์ ์ธ๋ถ์ api๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฑ ์ฌ๋ฌ ๊ณณ์ ๋ฆฌ์์ค๋ฅผ ํ์ฉํ ํ์์ฑ ์ฆ๊ฐ
*same origin์ด ์๋ ๋ค๋ฅธ cross-origin์ request๋ฅผ ๋ณด๋ด๊ณ response๋ฅผ ๋ฐ๊ธฐ ์ํด ํ์ฉํ ๋ฒ์ ๋ด ๊ฐ๋ฅํ๋๋ก ์์ ๋จ
์น์ดํ๋ฆฌ์ผ์ด์
, ๋ธ๋ผ์ฐ์ ์ ํด๋ผ์ด์ธํธ๋ฅผ ๋ณดํธํ๊ธฐ ์ํ ๋ณด์์ ์ฑ
=== node.js ๋ด์ฅ http๋ชจ๋์ ์ฌ์ฉํ์ฌ ๋จ์ํ ์๋ฒ ๊ตฌํ
Express ์์ .next๊ฐ .then ๊ณผ ๊ฐ์ ๋๋
.on('data', (chunk) => {
body. push(chunk);
}.on(...
โ๏ธ ์ด ๋ถ๋ถ์ด ๋ฐ๋ณต๋๋ ๊ฒ์ * Node.js ์ buffer ํฌ๊ธฐ๋ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ์์ ๋ฉ๋ชจ๋ฆฌ ํฌ๊ธฐ๊น์ง ์ ๋์ ์ผ๋ก ์ปค์ง๋ค? fs ๋ชจ๋์ stream ๊ด๋ จ ํจ์๋ค์ ๊ธฐ๋ณธ์ ์ผ๋ก 64kb์ด๊ณ highwartermark๋ก ๋ฐ๋ก ํฌ๊ธฐ๋ฅผ ์ง์ ํด์ค ์ ์๋ค๊ณ .
const http = require('http');
http.createServer((request, response) => {
// const { headers, method, url } = request;
let body = [];
request.on('error', (err) => {
console.error(err);
}).on('data', (chunk) => {
body.push(chunk); // ๋ฒํผ ์ถ์
}).on('end', () => {
body = Buffer.concat(body).toString(); // ์ถ์ ๋ Buffer๋ฐ์ดํฐ concat
response.on('error', (err) => {
console.error(err);
});
response.writeHead(200, {'Content-Type': 'application/json'})
// const responseBody = { headers, method, url, body };
response.end(JSON.stringify(responseBody))
});
}).listen(8080); // 8080port์์
const defaultCorsHeader = {
'Access-Control-Allow-Origin': '*', // ๋ชจ๋ ์ฃผ์๋ฅผ ํด๋ผ์ด์ธํธ๋ก ํ์ฉ
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', // ํ์ฉํ๋ ์์ฒญ๋ฉ์๋
'Access-Control-Allow-Headers': 'Content-Type, Accept',
'Access-Control-Max-Age': 10 // preflighted request๋ 10์ด๊น์ง๋ง ํ์ฉ, 10์ด ์ด๋ด์ ์์ฒญ์ด ์๋ค๊ฐ๋ค ํ๋ ๊ฒฝ์ฐ๋ preflight ์ ๋ณด๋ธ๋ค๋ ์๋ฏธ
};
** cors ํค๋๋ express๋ฅผ ์ด์ฉํ๋ฉด ๋ฏธ๋ฆฌ ์ผ์ผ์ด ์ ์ธํ์ง ์์๋ ๋๋ค.
๐ header ๋ด 'Access-Control-Allow-Origin'
์ ๋ค๋ฅธ ๋๋ฉ์ธ์ฃผ์๋ฅผ ๋ฃ๋๋ค๋ฉด?
โ๏ธ ํน์ origin(ํด๋ผ์ด์ธํธ ์ฃผ์) ์ง์ ์, ๋ค๋ฅธ ํฌํธ์์๋ ์ ๊ทผ ๋ถ๊ฐ
serve ์ ํธ๋ฆฌํฐ๋ฅผ ํ์ฉํ์ฌ origin์ ์ค์ npx serve -l 3000
> serve listen (Specify a URI endpoint on which to listen)
// client ์๋ฒ๊ฐ, ์ง์ ๋ origin๊ณผ ๋ถ์ผ์น ์ ์ฝ์์ฐฝ์์ ํ์ธ๋๋ ์๋ฌ
Access to fetch at 'http://localhost:3000/upper' from origin '~~' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
๐ฑโฟ When Harry met
not Sallyit's Error ๐ฃ โ ๏ธ
๋ด๊ฐ ๋ง๋ ์๋ฌ
- Content-type ๊ด๋ จ
Uncaught (in promise) SyntaxError: Unexpected token
${sth}in JSON at position 0
json ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด์ฃผ๋ ์๋ฒ์์ ๋ฐ์ดํฐํ์ ์ด json ํ์์์ ๋ช ์ํ์ง ์์์ ๋ฑ๋ ์๋ฌ
โ fetch ํจ์ ๋ด header ํญ๋ชฉ์ Content-type, Accept๋ฅผ ์ค์ ํด์ค 'application/json'์ผ๋ก ํด๊ฒฐ
๐ 'text/plain'์ผ๋ก ์ค์ ํ๋ค๋ฉด? preflighted request(OPTIONS) ๋ณด๋ด์ง ์์ ์ฆ ๋ฐ์ดํฐ ํ์ ์ ์ ํํ ์จ์ค์ผ ๋๋ค๋ ์๋ฏธ๋ก ๋ณด์
โ๏ธ options์์ฒญ์ cross-origin request๊ฐ ๋ค์ด์์ ๋, ์๋ฒ๊ฐ allowํ๋ ์กฐ๊ฑด์ ์ถฉ์กฑํ๋์ง ์ฌ์ ์ ํ์ธํ๋ 'preflighted request'์ด๋ค. MDN- Error ํธ๋ค๋ง ๊ด๋ จ
// node terminal์์ xxxx.js:$$$ throw er; // Unhandled 'error' event ... Emitted 'error' event on Server instance at: ...
๐ค ์๋ฌ๋ฅผ throwํ๊ณ ์์ผ๋ ์๋ฌ๋ฅผ ํธ๋ค๋งํ๋ ๊ฒ ์๋ค๋ ๋ป, createServer์ฌ์ฉํ http์์ฒญ/์๋ต ์ฒ๋ฆฌ ํจ์ ๋ด ๋ก์ง์์ ์กฐ๊ฑด์ด ์๋ชป ๊ฑธ๋ฆฐ ๊ฒ์ผ๋ก ๋ณด์ฌ์ง.
๊ตฌํํ ์๋ฒ์ ํ ์คํธ์ผ์ด์ค๋ก๋ ์๋ฌ๋ฐ์ํ ๋ก์ง์ด๋ ์ด๋ฒคํธ๊ฐ ์์ด์ '์๋ฌ'๋ก์ ํธ๋ค๋งํ์ง ์๊ณ , ์์ฒญ์ ๋ํ ์๋ต์ ์๋ฌ ์ฝ๋(http status code 400, 404, ..etc.,)๋ฅผ writeHead๋ก ์ฒ๋ฆฌ.(?)// console ์ฐฝ์์ ERR_STREAM_WRITE_AFTER_END
๐ค ๋ค์ด์ค๋ ์์ฒญ์ ํํ(GET/POST/..)์ ์ฃผ์path์ ๋ฐ๋ฅธ ์กฐ๊ฑด๋ณ๋ก ์๋ต์ end์ฒ๋ฆฌ ํ ๊ฒ์(์กฐ๊ฑด์ ๋ฐ๋ฅธ ๋ถ๊ธฐ, ๋ผ์ฐํ ), ๋ฐ๋ผ์ ์กฐ๊ฑด ์ธ ํจ์ ๋ด ์ ค ๋ฐ๊นฅ ์ค์ฝํ์์ end๋ก ์๋ต์ฒ๋ฆฌ๋ฅผ ํด๋ฒ๋ฆฐ ๊ฒ(์กฐ๊ฑด ๋ก์ง ์์์๋ ๋งจ ๋ง์ง๋ง์์๋ )์ด ์๋ฌ๋ฅผ ๋
(์กฐ๊ฑด์ ๋ค ๊ฑฐ์น๊ณ ๋ ๋ง์ง๋ง ์๋ต์ฒ๋ฆฌ๊ฐ ๋ค์ง์ด์์์ง๋ ๊ฒ์ฒ๋ผ ๋ฐ๊ฒฌ๋์์)์๋ต์ ํ๋ฒ๋ง ํ ์ ์๋ค๊ณ ์๊ฐํ๋ฉด๋จ. ์ค์ ๋ฐฉ์ง๋ฅผ ์ํดreturn;
์ ํด์ฃผ๊ธฐ๋ ํจ
์น ์๋ฒ (Web Server)
App Server๋ ์น ์๋ฒ(Web Server), ์น ์ฑ ์๋ฒ(WAS, Web Application Server)๋ฅผ ํฌ๊ดํ๋ ์์ ๊ฐ๋
์น ์๋ฒ๋ ์ ์ ์ธ ํ์ด์ง (์ด๋ฏธ์ง, html, js ๋ฑ ์ปดํจํฐ ๋ด ํ์ผ)๋ฅผ ๋ฐํ,
๋์ ํ์ด์ง๋ ๋ค์ด์จ ์์ฒญ์ ๋ง๊ฒ ๋์ ์ผ๋ก ๋ง๋ค์ด์ง ์ปจํ ์ธ
WAS๋ Database, ๋ก์ง์ ๊ฑฐ์ณ์ผ ํ๋ฏ๋ก ์ ์ ์ธ ์ปจํ ์ธ ๋ Web Server์ ์ฒ๋ฆฌํ์ฌ ๋น ๋ฅด๊ฒ ์ ๊ณตํ๋๋ก => ๊ธฐ๋ฅ์ ๋ถ๋ฆฌํ์ฌ ์๋ฒ ๋ถํ๋ฅผ ๋ฐฉ์ง
๊ทธ ์ธ ๋ฌผ๋ฆฌ์ ์ผ๋ก ๋ถ๋ฆฌํ์ฌ ๋ณด์์ ๊ฐํํ๋ ๋ฑ ๊ฒฐ๋ก ์ ์ผ๋ก, ์์ ์ด์ฉ์ ํจ์จ์ฑ ๋ฐ ์ฅ์ ๊ทน๋ณต, ๋ฐฐํฌ ๋ฐ ์ ์ง๋ณด์์ ํธ์์ฑ์ ์ํด Web Server, WAS๋ฅผ ๊ฐ๊ธฐ ์ฌ์ฉํ๋ค.
๋๋ฒ๊น
(์๋ํฐ ๋ด ๋๋ฒ๊น
๊ธฐ๋ฅ๊ณผ ํฌ๋กฌ(์น๋ธ๋ผ์ฐ์ ) ๊ฐ๋ฐ์ ๋๊ตฌ์ node.js)
package.json์์ dependency
์ฃผ์์ฐฝ์ ์ ๋ ฅํ๋ ๊ฒ: GET ์์ฒญ์
์์ฒญ body ๋ฐ๊ธฐ
๐ฉ๐ฉ๐ปโ๐ป ๐ป
๋ด์ผ์ Express Library๋ก mini node ์๋ฒ๋ฅผ ๋ฆฌํฉํ ๋งํ ์์ .
์ค๋ fetch๋ก์ง๊ณผ http์์ฒญ,์๋ต ์ฒ๋ฆฌ๋ฅผ ์์ฑํ๋ ๋ฑ์ ๋ฐฉ์์ผ๋ก ์๋ฒ๋ฅผ ๊ตฌํํด๋ณธ ๊ฒ๊ณผ ๋ฌ๋ฆฌ Express๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋จ์ํ์์ผ์ฃผ๋ ์์ ์ด ๋ฌด์์ธ์ง, ๊ทธ๋ฆฌ๊ณ ๋ฏธ๋ค์จ์ด๋ฅผ ์ค์ ์ ๋๊ณ ํ์ต