HTTP

27792 ワード
テキストリンク

Cookieとセッションの違い


一般的にグーグルを検索すると、
Cookie:ブラウザに保存
≪セッション｜Sessions｜ldap≫:サーバーに保存
何を保存してるの?
ブラウザにデータを格納するという.
ブラウザは何ですか...?

エクスプローラ


URLとスクリーンレンダリング
ユーザーが要求したサーバ情報に応答して画面に表示
サーバに特定のURLの使用を要求
アドレスウィンドウURL部(リクエスト／リクエスト)
[アドレス](Address)ウィンドウの下にあるレンダリング部分(レスポンス/レスポンス)
ブラウザはサーバにサーバ応答のファイルまたはデータの保存を要求する(Cookie)
サーバではなくブラウザによって格納できる情報をCookieと呼ぶ.
ブラウザに入力したもの?サーバにデータを格納することをセッションと呼びます.
Cookie:ブラウザに格納されている値
≪セッション｜Sessions｜ldap≫:サーバー・メモリの低い値
request message
GET/HTTP/1.1
request method
GET, POST
express
Nodejsを使用してサーバのフレームワークを簡単に構成
クラスとライブラリの集合です
ブラウザがサーバと通信すると、
string.split(「」)を使用して文字列を配列に変換して書く

コンパイルエラーとランタイムエラー


コンパイルエラー
実行時までにエラーが発生し、実行できません.
誤字
コンパイルエラー
ランタイムエラー
コンパイルに問題はありませんが、実際に実行中にエラーが発生しました.

cors例


corsエラー:他のアドレスの情報を取得した場合
ブラウザでは、情報が異なるため、セキュリティ上の理由で中断します.
1台のサーバの同期通信
リクエスト->スレッド最終リスニングステータス
デメリット:連続テープが遅れると、待ち続けるのが問題になります.
非同期通信リクエスト->バックグラウンド送信ステータス
他のことを処理して、別の要求を待っています.
欠点の順序を保証しないと、作業順序がうまくいかない可能性があります.
リース結果の保証および処理が必要なサービスには適用されません
いつですか.
ブロックチェーンについては、データ・ウェアハウスが重要であれば
いつ非同期ですか.
今すぐ更新する必要があります
ユーザーが迅速なフィードバックを必要とする場合
npm install cors
これらのセクションは、解決に役立つモジュール(ライブラリ)です.
back/views/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloWorld</title>
</head>
<body>
    HelloWorld
</body>
</html>

back/server.js

const express = require('express')
const nunjucks = require('nunjucks')
const app = express()

app.set('view engine', 'html')
nunjucks.configure('views',{
    express:app,
})

app.get('/',(req, res) => {
    // console.log(req.headers)
    // res.setHeader('name', 'jch')
    // res.setHeader('Set-Cookie', 'token=true') // 브라우저에 데이터를 저장하는게 쿠키 쿠키파서 쿠키를 간단하게 하는 라이브러리
    res.render('index')
})

// let session = 'token=true' // 서버에서 데이터를 저장하는게 세션
app.post("/getCookie", (req,res) => {   
    /*const [name, value] = req.headers.cookies.split('=')
    console.log(name,value)*/
     // true 주면 누구나 허용
     res.setHeader('Access-Control-Allow-Origin','http://localhost:4000')
     // 어떤 메서드만 허용할거냐
     res.setHeader('Access-Control-Allow-Methods','POST, GET, OPTIONS, DELETE')
     // 쿠키 공유까지 허용
     res.setHeader('Access-Control-Allow-Credentials','true')
     // 헤더 Context-type
     res.setHeader('Access-Control-Allow-Headers','Content-type')
     res.setHeader('Set-Cookie','token=true')
     res.send('test getCookie')
 
})

app.listen(3000,() => {
    console.log(`server start`)
})
cors 사용 예제
const express = require('express')
const app = express()
const nunjucks = require('nunjucks')
const cors = require('cors')
const cookieParser = require('cookie-parser')


app.set('view engine','html')
nunjucks.configure('views',{
     express:app,
 })

 app.use(cookieParser())

 app.use(cors({
     origin:['http://localhost:4000'],
     credentials: true
 }))

 app.get('/',(req,res)=>{
     res.render('index')
 })

 app.post('/getCookie',(req,res)=>{
//     // res.setHeader('Access-Control-Allow-Origin','http://localhost:4000')
//     // res.setHeader('Access-Control-Allow-Methods','POST, GET, OPTIONS, DELETE') // methods 사용여부
//     // res.setHeader('Access-Control-Allow-Credentials','true')
//     // res.setHeader('Access-Control-Allow-Headers','Content-type')


     res.setHeader('Set-Cookie','token=true')
     res.send('cookie~?')
 })

 app.get('/cookieParser',(req,res)=>{
    res.cookie('token2','true')
    res.send('cookieparser?')
 })

 app.listen(3000,()=>{
     console.log('server start')
})

女紅


htmlのレンダリングを支援するツールを使用してuiを迅速に実現できます.

エヒオス


AxiosはNodePromiseベースのHTTPクライアントビューでjsとブラウザに推奨される通信ライブラリ.
// for GET
axios.get('your_url', {withCredentials: true});
//for POST
axios.post('your_url', data, {withCredentials: true}); 
//for PUT
axios.put('your_url', data, {withCredentials: true}); 
//for DELETE
axios.delete('your_url', data, {withCredentials: true});

// data는 특별한 사항 아니면 null을 줘야 오류가 발생하지 않는다
リクエストメソッドによって受信パラメータが異なります
{withCrementures:true}Cookieを要求に含めるためのオプション値
front/views/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
    <script type="text/javascript">
        function init() {
            axios.post('http://localhost:3000/getCookie', null,
            {                
                withCredentials:'true' 
            });
        };
        init();
    </script>
</head>
<body>
    <H1>Hello Front Server!!!</H1>
</body>
</html>
front/server.js

const express = require('express')
const app = express()
const nunjucks = require('nunjucks')

app.set('view engine', 'html')
nunjucks.configure('views', {
    express:app,
})

// app.use(express.urlencoded({extended:true,}))
// app.use(express.json())

app.get('/', (req,res)=>{
    res.render('index')
})

// app.post('/getCookie', (req, res)=>{
//     console.log(req.body)
//     res.send('됨?')
// })

app.listen(4000,() => {
    console.log(`start`)
})

「CSS」の全画面ポップアップメニューをポップアップする方法
Spring(2)