欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解javascript如何在跨域請求中攜帶cookie

 更新時間:2022年03月02日 10:33:26   作者:小曼的碼世界  
本文主要介紹了詳解javascript如何在跨域請求中攜帶cookie,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

1. 搭建環(huán)境

1.生成工程文件

npm init 

2.安裝 express

npm i express --save 

3.新增app1.js,開啟服務器1 端口:3001

const express = require('express')
const app = express()
const port = 3001

// 設置`cookie`
app.get("/login", (req, res) => {
    res.cookie("JESSIONID", "10101001", { maxAge: 2000000, httpOnly: true });
    res.json({ code: 200, message: "登錄成功" });
  });
  
// 檢測瀏覽器是否會自動攜帶上`cookie`
app.get("/getUser", (req, res) => {
const user = req.headers.cookie.split("=")[1];
res.json({ code: 200, user });
});

// 靜態(tài)資源在public目錄下
app.use("/", express.static("public"));
  
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

4.新增app2.js,開啟服務器2 端口:3002

const express = require('express')
const app = express()
const port = 3002

app.get("/crossList", (req, res) => {
  res.json({ code: 200, msg: "這是3002端口返回的" });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

5.新增public文件夾,新建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 src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div>
        <button id="button">同源請求</button>
        <button id="crossButton">跨域請求</button>
    </div>
    <script>
        const button = document.querySelector("#button");
        const crossButton = document.querySelector("#crossButton");
  
        axios.get("http://localhost:3001/login", {}).then((res) => {
          console.log(res);
        });
        // 發(fā)送同域請求
        button.onclick = function () {
          axios.get("http://localhost:3001/getUser", {}).then((res) => {
            console.log(res);
          });
        };
        // 發(fā)送跨域請求
        crossButton.onclick = function () {
          axios({
            method: "get",
            url: "http://localhost:3002/crossList",
          }).then((res) => {
            console.log(res);
          });
        };
      </script>
  
</body>
</html>

6.分別啟動兩個服務

  • node app1.js
  • node app2.js

7.項目目錄如下

在這里插入圖片描述

至此,環(huán)境搭建好了,在瀏覽器訪問http://localhost:3001/index.html即可。

在這里插入圖片描述

我們把資源部署到了服務器1上,即端口3001。同源請求的是3001的接口,跨域請求的是3002的接口。

2. 測試同源cookie

加載index.html會自動請求login接口,獲取cookie

在這里插入圖片描述

在這里插入圖片描述

點擊同源請求按鈕,發(fā)送同源請求,getUser接口請求會自動攜帶cookie

在這里插入圖片描述

3. 跨域請求攜帶cookie

點擊跨域請求按鈕

在這里插入圖片描述

解決:
1.axios請求時加上 withCredentials: true,再次點擊跨域請求

crossButton.onclick = function () {
  axios({
     withCredentials: true, // ++
     method: "get",
     url: "http://localhost:3002/crossList",
   }).then((res) => {
     console.log(res);
   });
 };

在這里插入圖片描述

2. 在服務端設置Access-Control-Allow-Origin
在app2.js中加入

app.all("*", (req, res, next) => {
   res.header("Access-Control-Allow-Origin", "http://localhost:3001");  // ++
   next();
});

在這里插入圖片描述

3. 在服務端設置Access-Control-Allow-Credentials
在app2.js中加入

app.all("*", (req, res, next) => {
   res.header("Access-Control-Allow-Origin", "http://localhost:3001");
   res.header("Access-Control-Allow-Credentials", "true"); // ++ 
   next();
});

在這里插入圖片描述

到此,我看可以看到跨域請求中加上了cookie。

4. 總結

1.前端請求時在request對象中配置"withCredentials": true;
2.跨域服務端在response的header中配置"Access-Control-Allow-Origin", “http://xxx:${port}”;
3.跨域服務端在response的header中配置"Access-Control-Allow-Credentials", “true”

5. 知識點

1.withCredentials
該XMLHttpRequest.withCredentials屬性是一個布爾值,指示是否Access-Control應使用 cookie、授權標頭或 TLS 客戶端證書等憑據(jù)進行跨站點請求。設置withCredentials對同站點請求沒有影響。
此外,此標志還用于指示何時在響應中忽略 cookie。默認值為false. XMLHttpRequest來自不同域的 cookie 不能為自己的域設置 cookie 值,除非在發(fā)出請求之前withCredentials設置為。true通過設置為 true 獲得的第三方 cookiewithCredentials仍將遵循同源策略,因此請求腳本無法通過document.cookie或從響應標頭訪問。 —來自MDN

2.Access-Control-Allow-Origin
指定了該響應的資源是否被允許與給定的origin共享

3.Access-Control-Allow-Credentials
當請求的憑證模式 ( ) 為Access-Control-Allow-Credentials時,響應標頭告訴瀏覽器是否將響應暴露給前端 JavaScript 代碼。 Request.credentialsinclude

當請求的憑據(jù)模式 ( Request.credentials) 為 時,如果值為include,瀏覽器只會將響應暴露給前端 JavaScript 代碼。 Access-Control-Allow-Credentialstrue

憑據(jù)是 cookie、授權標頭或 TLS 客戶端證書。

當用作對預檢請求的響應的一部分時,這表明是否可以使用憑證發(fā)出實際請求。請注意,簡單GET 的請求不會被預檢。因此,如果對具有憑據(jù)的資源發(fā)出請求,并且如果此標頭未與資源一起返回,則響應將被瀏覽器忽略并且不會返回到 Web 內(nèi)容。
Access-Control-Allow-Credentials頭與 XMLHttpRequest.withCredentials屬性或 Fetch API 構造函數(shù)中的credentials選項一起使用。Request()對于帶有憑據(jù)的 CORS 請求,為了讓瀏覽器向前端 JavaScript 代碼公開響應,服務器(使用 Access-Control-Allow-Credentials標頭)和客戶端(通過為 XHR、Fetch 或 Ajax 請求設置憑據(jù)模式)都必須表明它們’正在選擇包括憑據(jù)。 —來自MDN

到此這篇關于詳解javascript如何在跨域請求中攜帶cookie的文章就介紹到這了,更多相關javascript跨域攜帶cookie內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • javascript自定義加載loading效果

    javascript自定義加載loading效果

    這篇文章主要為大家詳細介紹了javascript自定義加載loading效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • javascript 動態(tài)生成私有變量訪問器

    javascript 動態(tài)生成私有變量訪問器

    創(chuàng)建一個新的用戶對象,接受一個有許多屬性的對象作為參數(shù)
    2009-12-12
  • js中日期的加減法

    js中日期的加減法

    JavaScript實現(xiàn)日期加減計算功能代碼實例,因為在js中沒有類似C#中的AddDays方法,所以要想實現(xiàn)日期加減的話,就需要自己寫函數(shù)來實現(xiàn)。
    2015-05-05
  • JavaScript每天必學之事件

    JavaScript每天必學之事件

    JavaScript每天必學之事件,聊一聊事件冒泡與捕獲、事件冒泡的好處,感興趣的小伙伴們可以參考一下
    2016-09-09
  • 在vue中為什么不能用index作為key

    在vue中為什么不能用index作為key

    這篇文章主要介紹了在vue中為什么不能用index作為key,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-09-09
  • javascript 獲取圖片顏色

    javascript 獲取圖片顏色

    html 5.0的canvas可以獲取到圖片的像素點了。這樣,我們可以做很多以圖片有關的操作和渲染了。當然今后也會給瀏覽器渲染引擎更高的要求。(YY, 什么時候html渲染引擎也支持多核和GPU呢?)
    2009-04-04
  • TypeScript中Array(數(shù)組)聲明與簡單使用方法

    TypeScript中Array(數(shù)組)聲明與簡單使用方法

    這篇文章主要給大家介紹了關于TypeScript中Array(數(shù)組)聲明與簡單使用的相關資料,TypeScript Array(數(shù)組)數(shù)組對象是使用單獨的變量名來存儲一系列的值,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-12-12
  • JS實現(xiàn)鼠標滑過鏈接改變網(wǎng)頁背景顏色的方法

    JS實現(xiàn)鼠標滑過鏈接改變網(wǎng)頁背景顏色的方法

    這篇文章主要介紹了JS實現(xiàn)鼠標滑過鏈接改變網(wǎng)頁背景顏色的方法,涉及js響應鼠標事件動態(tài)修改頁面元素屬性的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-10-10
  • 微信瀏覽器內(nèi)置JavaScript對象WeixinJSBridge使用實例

    微信瀏覽器內(nèi)置JavaScript對象WeixinJSBridge使用實例

    這篇文章主要介紹了微信瀏覽器內(nèi)置JavaScript對象WeixinJSBridge使用實例,本文給出了分享到朋友圈、發(fā)送給好友、分享到騰訊微博、關注指定的微信號等功能代碼,需要的朋友可以參考下
    2015-05-05
  • JavaScript截取、切割字符串的技巧

    JavaScript截取、切割字符串的技巧

    這篇文章主要介紹了JavaScript截取、切割字符串的技巧,文中給大家提到了substr 和 substring方法的區(qū)別,結合示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2016-01-01

最新評論