My Capability)HTTPトランザクションを使用してログインウィンドウを作成する-サーバの概要を完了し、bodyを介してデータを転送および受信する
以前はネットワーク上でHttp通信の実現方法を学びました.その上で、ノード.js上のHTTPトランザクションを用いて,簡単なログインウィンドウとサーバで会員の有無を判別し,会員が一時的にOpenAPIを開いて映画リストを印刷するホームページを作成する.
Httpトランザクションを使用するサーバ通信 OpenAPIを介してデータを送受信
ページは上記のように表示されます.現在はJSファイルでサーバとの通信方法を実現している.
サーバ通信部
HTTPトランザクション実装の間にはいくつかのルールがあります.
これらのルールは、https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/(node.js HTTPトランザクション分解)を確認することによって詳細に知ることができる.は、サーバを作成するためにWebサーバオブジェクトを最初に作成する必要があります.次にcreateServicerを使用します. の後、私たちが書くデータ値をrequestオブジェクトに持ち込む必要があります.方法は構造分解により以下のように割り当てられる. 体の持ち込み方を求められるのは面倒です.データを受信する場合は、それぞれ受信し、配列に入れて1つにマージします.
ストリーム内のdataイベントとendイベントにイベントリスナーを登録してデータを受信できます.
「data」イベントで発生するセグメントはBufferです.セグメントが文字列データであることを知っている場合は、データを配列に収集し、endイベントに貼り付け続け、文字列として作成することをお勧めします. createServerが返すサーバオブジェクトはEventEmitterで、サーバオブジェクトを生成してリスナーを追加する略語構文が使用されます.略さないで、なるほど
のすべてのイベントを生成するオブジェクトはEventEmitterインスタンスです.つまりEventEmitterはインスタンスを生成するクラスである.これらのオブジェクトを使用すると、1つ以上の関数を特定のイベントにアタッチして実行できます.on()関数を持つ.これらのオブジェクトがイベントをトリガーすると、特定のイベント上の1つ以上の関数が非同期で呼び出されます.呼び出された関数によって生成された戻り値は無視され、破棄されます.
次の例では、EventEmitterクラスでインスタンスを作成し、これらのインスタンスでインスタンスを作成します.on()関数が実行されます. 要求データの応答ヘッダを設定する方法は以下の通りである. 明示的なデータ転送は、タイトルを書き込むwriteHeadメソッドを有する.このメソッドは、ストリームにステータスコードとヘッダーを作成します. bodyを送信する場合はwriteとendを使用します.
サーバーのテスト
正常にサーバーが作成されました.次に、サーバ上でデータを処理します.
データしょりりょういき結果
コンテンツタイプヘッダと受信ヘッダは、いずれもデータ型ヘッダです.
Content-Type:要求と応答に送信され、データ型のヘッダーが提供されます.
サーバはクライアントに「このタイプを返します」(GETメソッドはkey=value形式でデータを転送するので、「Contte-type」は必要ありません).
Accept:Webサーバの要求時にメッセージを要求するタイトル
クライアントはサーバに対して「これらのデータのみを許可します」という意味です.
サーバを処理するとき、私は多くのヘッダと方法を使用すべきであることに気づいた. ヘッダの種類とその役割をさらに理解する必要がある. HTTPトランザクションだけでなく、Expressを使用したサーバ通信も学習します. は、HTTPトランザクションに関連する多くの必要なコードおよびコンテンツ、およびそれらがなぜ駆動され、必要とされるのかを詳細に理解しています. 注意 CORSは、ネットワーク転送を行うことを意識しています. サーバ内で会員の有無を確認した後、会員一時データを非会員ログに転送エラー転送 メンバーの場合は、OpenAPIを使用して応答ウィンドウにムービーリスト を印刷します.
リファレンス https://dololak.tistory.com/630 http://daplus.net/javascript-%EC%9A%94%EC%B2%AD-%ED%97%A4%EB%8D%94-%ED%95%84%EB%93%9C-access-control-allow-headers%EB%8A%94-access-control-allow-headers%EC%97%90%EC%84%9C-%ED%97%88%EC%9A%A9%EB%90%98%EC%A7%80/ https://www.daleseo.com/js-window-fetch/ https://nodejs.org/api/events.html#events_class_eventemitter https://velog.io/@dlrbwls0302/TIL-HTTP-%ED%8A%B8%EB%9E%9C%EC%9E%AD%EC%85%98-%ED%95%B4%EB%B6%80-%EB%B0%8F-Mini-Node-Server-%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8-%EC%BD%94%EB%93%9C-%EB%B6%84%EC%84%9D
最終的に必要な能力。
1.ログインウィンドウの実装
ページは上記のように表示されます.現在はJSファイルでサーバとの通信方法を実現している.
サーバ通信部
//서버로 보내주는 함수
function post(Id,PW){
let Identy = Id
//fetch를 통해 서버와 통신을 실시 한다.
fetch(`http://localhost:5000`,{
method: 'POST', //post metod는 POST로 전달한다.
body: JSON.stringify(Identy), //body(로그인 정보전달)을 JSON으로 전달한다.
headers:{
'Content-Type':'application/json'
}
})
.then(res=> res.json())
.then(res =>respon(res))
}function respon(result){
Id_text = ''
PW_text = ''
if(result === 'baek1008'){
alert(`${result}님 로그인이 완료 되었습니다.`)
}
else alert('회원이 아니십니다.')
}TIP)なぜファイルをJSONに転送するのかというと、実装技術によれば、どこでもJSONを解釈すればデータを使用でき、移動間のデータも軽くなるので、通信間の標準はJSONを使用することになる。
2.データ処理領域の実施
HTTPトランザクション実装の間にはいくつかのルールがあります.
これらのルールは、https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/(node.js HTTPトランザクション分解)を確認することによって詳細に知ることができる.
const http = require('http');
const server = http.createServer((request, response) => {
// 여기서 작업이 진행됩니다!
}); const { headers, method, url } = request;ストリーム内のdataイベントとendイベントにイベントリスナーを登録してデータを受信できます.
「data」イベントで発生するセグメントはBufferです.セグメントが文字列データであることを知っている場合は、データを配列に収集し、endイベントに貼り付け続け、文字列として作成することをお勧めします.
let body = [];
request.on('data', (chunk) => { //요청된 데이터를 사용할때 .on이라는 메소드를 사용한다.
body.push(chunk);
}).on('end', () => {
body = Buffer.concat(body).toString();
// 여기서 `body`에 전체 요청 바디가 문자열로 담겨있습니다.
});TIP)なぜ?createServerを使用して作成されたオブジェクトをオブジェクトと呼びますか?
次の例では、EventEmitterクラスでインスタンスを作成し、これらのインスタンスでインスタンスを作成します.on()関数が実行されます.
const EventEmitter = require('events'); // EventEmitter를 쓰기 위해 먼저 설정하는 부분
class MyEmitter extends EventEmitter {} // EventEmitter 클래스를 상속받는 MyEmitter라는 자식 클래스를 생성
const myEmitter = new MyEmitter(); // MyEmitter 클래스를 통해 인스턴스 생성
myEmitter.on('event', () => { // 인스턴스에 on 함수를 적용.
// event는 이벤트의 이름이고 뒤에 붙는 함수는 이 이벤트에 붙는 함수이다.
console.log('an event occurred!');
});
myEmitter.emit('event'); // event라는 이벤트에 붙은 함수를 emit로 실행시켜준다.const server = http.createServer((request, response) => {
// 여기서 작업이 진행됩니다!
});response.setHeader('Content-Type', 'application/json');
response.setHeader('X-Powered-By', 'bacon');//200OK와 그에따른 헤더를 설정해준다.
response.writeHead(200, {
'Content-Type': 'application/json',
'X-Powered-By': 'bacon'
});response.write('<html>');
response.write('<body>');
response.write('<h1>Hello, World!</h1>');
response.write('</body>');
response.write('</html>');
response.end();
response.end('<html><body><h1>Hello, World!</h1></body></html>');まず、上記の方法でサーバーがうまくできているかどうかを見てみましょう。
サーバーのテスト
const server = http.createServer((request, response) => {
const { headers, method, url } = request;
response.writeHead(200, {'Content-Type': 'application/json'})
//만들어질 서버에 출력할 문구
response.end('server complite')
});正常にサーバーが作成されました.次に、サーバ上でデータを処理します.
データしょりりょういき
//http로 서버를 만들고 사용할 PORT와 IP를 변수로 지정
const http = require('http');
const PORT = 5000;
const ip = 'localhost';
//서버 객체를 만들어 server 변수에 할당한다.
const server = http.createServer((request, response) => {
const { headers, method, url } = request;
//response.writeHead(200, {'Content-Type': 'application/json'})
//response.end('server complite')
//바디가 비어있지 않으면 밑의 조건문을 실행한다.
if(!(request.body)){
//body에 요청된 데이터를 한곳으로 모읍니다.
let body = [];
request.on('data', (chunk) => {
body.push(chunk);
}).on('end', () => {
body = Buffer.concat(body).toString();
//모아진 데이터(body)가 보내집니다.
response.writeHead(201,{'Content-Type': 'application/json'})
response.end(body)
})
}
//body가 비어있거나 서버가 문제일시 다음 404에러를 띄운다.
else {
response.writeHead(404, {'Content-Type': 'application/json'})
response.end()
}
//서버 동작시마다 console로 확인한다.
console.log(
`http request method is ${request.method}, url is ${request.url}`);
});
//서버 객체를 listen으로 호출한다.
server.listen(PORT, ip, () => {
console.log(`http server listen on ${ip}:${PORT}`);
});結果
ただし、結果として「メンバーではありません」というウィンドウが表示されます.これは、サーバが正常に動作しているが、受信したデータを処理するresponse関数が正常に動作していないことを意味します.だから結果を確認するためにコンソールを使いました.
間違いが多い.これらのエラーから処理を開始...
分析:<実行前の要求の応答はアクセス制御チェックに合格できません:要求されたリソースには「アクセス-制御-すべての-origin」ヘッダーがありません.不透明な応答が要求を満たす場合は、要求モードを「CORSなし」に設定して、CORSを無効にするリソースを取得します.>
すなわち,データに応答するCORSがないため,上記のエラーが発生する.
CORSは以前のブログでも触れたことがある.これは、GETなどのすべての特定の条件を満たさない限り、ブラウザで自動的に実行される部分であり、まずpreflight要求を実行して、要求が可能かどうかをサーバに確認し、サーバからライセンスと使用可能な方法を取得し、これらの方法を使用してデータを送信します.
現在のデータを送信する場合、サーバ側はまずCORSを適用して、現在のデータを送信するURLにライセンスを付与するかどうかを確認します.そのため、現在のデータを送信するURLにライセンスを付与する必要があります.
タイトルを変更する必要があります.タイトルを変更する方法は、https://nodejs.org/api/http.html#http_response_writehead_statuscode_statusmessage_headersの例「response.writeHead(status code,statusMessage,headers)」セクションを使用します.
1.Access Control Allow-Originの使用
エラーコード要求のアクセス制御Allow-Originを使用すると、次のような状況が発生します.
TIP)アクセス制御-すべてのOriginは、応答が所与のソースからの要求コードと共有できるかどうかを示す.EX)브라우저에 https://developer.mozilla.org으로부터의 요청을 허용한다고 알리는 응답은 다음을 포함할 것입니다
Access-Control-Allow-Origin: https://developer.mozilla.org
2.Access Control Allow Headersの使用
「アクセス制御」-「すべてのHeaders」は、「アクセス制御-要求-Headers」を含むpreflight要求に応答するためのタイトルであり、実際の要求で使用可能なHTTPタイトルのリストがリストされている.
したがって、「アクセス制御-すべてのHeaders」には、「コンテンツ-タイプ、受け入れ」が含まれます.
現在のリクエスト部では、bodyに含まれるデータがどのようなフォーマットの「Content-Type」:「アプリケーション/json」であるかをPOSTメソッドで伝えてJSONデータを送信する.
これにより、要求されたbodyデータをグループ化することができる.
最終応答のデータ型を表示するには、Content-Typeをヘッダとして送信する必要があります.response.writeHead(201,{'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Origin': '*',})
그리고 다른 요청에 대한 헤더도 위와같은 방식으로 바꿉니다.
TIP)コンテンツタイプヘッダと受信ヘッダの違い
EX)브라우저에 https://developer.mozilla.org으로부터의 요청을 허용한다고 알리는 응답은 다음을 포함할 것입니다
Access-Control-Allow-Origin: https://developer.mozilla.orgresponse.writeHead(201,{'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Origin': '*',})
그리고 다른 요청에 대한 헤더도 위와같은 방식으로 바꿉니다.コンテンツタイプヘッダと受信ヘッダは、いずれもデータ型ヘッダです.
Content-Type:要求と応答に送信され、データ型のヘッダーが提供されます.
サーバはクライアントに「このタイプを返します」(GETメソッドはkey=value形式でデータを転送するので、「Contte-type」は必要ありません).
Accept:Webサーバの要求時にメッセージを要求するタイトル
クライアントはサーバに対して「これらのデータのみを許可します」という意味です.
結果
最終的に応答が完了しました。
に感銘を与える
次の計画
リファレンス
Reference
この問題について(My Capability)HTTPトランザクションを使用してログインウィンドウを作成する-サーバの概要を完了し、bodyを介してデータを転送および受信する), 我々は、より多くの情報をここで見つけました https://velog.io/@baek1008/My-ability-HTTP-트랜잭션을-이용한-로그인-창-만들기-서버-개설완료body를-통한-데이터-전달-및-수신テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol