扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解javascript如何在跨域请求中携带cookie
  • 673

0
分享到

详解javascript如何在跨域请求中携带cookie

2024-04-02 19:04:59 673人浏览 泡泡鱼
摘要

目录1. 搭建环境2. 测试同源cookie3. 跨域请求携带cookie4. 总结5. 知识点1. 搭建环境 1.生成工程文件 npm init 2.安装 express npm

1. 搭建环境

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 });
});

// 静态资源在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);
        });
        // 发送同域请求
        button.onclick = function () {
          axios.get("http://localhost:3001/getUser", {}).then((res) => {
            console.log(res);
          });
        };
        // 发送跨域请求
        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.项目目录如下

在这里插入图片描述

至此，环境搭建好了，在浏览器访问http://localhost:3001/index.html即可。

在这里插入图片描述

我们把资源部署到了服务器1上，即端口3001。同源请求的是3001的接口，跨域请求的是3002的接口。

2. 测试同源cookie

加载index.html会自动请求login接口，获取cookie

在这里插入图片描述

在这里插入图片描述

点击同源请求按钮，发送同源请求，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 客户端证书等凭据进行跨站点请求。设置withCredentials对同站点请求没有影响。
此外，此标志还用于指示何时在响应中忽略 cookie。默认值为false. XMLHttpRequest来自不同域的 cookie 不能为自己的域设置 cookie 值，除非在发出请求之前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

当请求的凭据模式 ( Request.credentials) 为 时，如果值为include，浏览器只会将响应暴露给前端 JavaScript 代码。 Access-Control-Allow-Credentialstrue

凭据是 cookie、授权标头或 TLS 客户端证书。

当用作对预检请求的响应的一部分时，这表明是否可以使用凭证发出实际请求。请注意，简单GET 的请求不会被预检。因此，如果对具有凭据的资源发出请求，并且如果此标头未与资源一起返回，则响应将被浏览器忽略并且不会返回到 WEB 内容。
Access-Control-Allow-Credentials头与 XMLHttpRequest.withCredentials属性或 Fetch api 构造函数中的credentials选项一起使用。Request()对于带有凭据的 CORS 请求，为了让浏览器向前端 JavaScript 代码公开响应，服务器（使用 Access-Control-Allow-Credentials标头）和客户端（通过为 XHR、Fetch 或 ajax 请求设置凭据模式）都必须表明它们’正在选择包括凭据。 —来自MDN

到此这篇关于详解javascript如何在跨域请求中携带cookie的文章就介绍到这了,更多相关javascript跨域携带cookie内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 详解javascript如何在跨域请求中携带cookie

本文链接: https://lsjlt.com/news/141036.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 详解javascript如何在跨域请求中携带cookie
    目录1. 搭建环境2. 测试同源cookie3. 跨域请求携带cookie4. 总结5. 知识点1. 搭建环境 1.生成工程文件 npm init 2.安装 express npm...
    99+
    2024-04-02
  • javascript怎么在跨域请求中携带cookie
    这篇文章给大家分享的是有关javascript怎么在跨域请求中携带cookie的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。1. 搭建环境生成工程文件npm init安装 expressnpm ...
    99+
    2023-06-29
  • vue项目中如何使用axios发送请求让ajax请求头部携带cookie
    这篇文章主要为大家展示了“vue项目中如何使用axios发送请求让ajax请求头部携带cookie”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue项目中如何...
    99+
    2024-04-02
  • 如何理解ajax跨域请求
    本篇内容介绍了“如何理解ajax跨域请求”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！同源策略限制同源策略...
    99+
    2024-04-02
  • java中的跨域请求如何解决
    本篇文章为大家展示了java中的跨域请求如何解决 ，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。java 请求跨域问题解决方法实例详解新建Util类，在Util中添加下面方法： public s...
    99+
    2023-05-31
    java 跨域请求 ava
  • 如何解决ajax跨域请求数据cookie丢失的问题
    本篇内容介绍了“如何解决ajax跨域请求数据cookie丢失的问题”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有...
    99+
    2024-04-02
  • 如何解决Ajax请求跨域问题
    这期内容当中小编将会给大家带来有关如何解决Ajax请求跨域问题，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。一、解决方案：1，在服务器端的响应头中添加一个http参数：res.setHeader(&quo...
    99+
    2023-06-08
  • Ajax中如何实现jsonp跨域请求
    这篇文章主要介绍Ajax中如何实现jsonp跨域请求，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！什么是跨域？简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他...
    99+
    2024-04-02
  • 如何解决Ajax请求WebService跨域问题
    这篇文章主要介绍如何解决Ajax请求WebService跨域问题，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1、背景　　用Jquery中Ajax方式在asp.net开发环境中Web...
    99+
    2024-04-02
  • 如何在Springmvc中利用ajax实现一个跨域请求
    今天就跟大家聊聊有关如何在Springmvc中利用ajax实现一个跨域请求，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。写一个类  继承HandlerInterceptor...
    99+
    2023-05-31
    springmvc ajax
  • springboot 如何解决cross跨域请求的问题
    目录springboot 解决cross跨域请求1.使用ajax发送跨域请求接口时2.在被跨域请求的一方配置3.再次测试4.对于只有个别需要开放跨域请求的接口可以这样玩5.其它解决跨...
    99+
    2024-04-02
  • 如何在JavaScript中实现跨域
    如何在JavaScript中实现跨域？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。JavaScript的特点1.JavaScript主要用来向HTML页面添加交...
    99+
    2023-06-06
  • SpringMVC如何重新定向redirect请求中携带数据方式
    这篇文章给大家分享的是有关SpringMVC如何重新定向redirect请求中携带数据方式的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。SpringMVC 重新定向redirect请求中携带数据在控制器方法返回的...
    99+
    2023-06-22
  • vue如何解决axios请求前端跨域问题
    目录前言一、为什么会出现跨域的问题？二、解决方案跨域资源共享（CORS）写在最后前言 最近在写纯前端的vue项目的时候，碰到了axios请求本机的资源的时候，出现了访问报404的问...
    99+
    2024-04-02
  • Java中的跨域请求如何利用cors实现
    本篇文章为大家展示了Java中的跨域请求如何利用cors实现，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。什么是跨域？跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器...
    99+
    2023-05-31
    java cors ava
  • 如何解决vue中$http的get和post请求跨域问题
    这篇文章给大家分享的是有关如何解决vue中$http的get和post请求跨域问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。vue $http的get和post请求跨域问题首先在config/index.js...
    99+
    2023-06-15
  • PHP中如何实现页面跳转并携带POST请求数据
    PHP是一种常用的服务器端脚本语言，用于开发动态网站和Web应用程序。在开发Web应用程序时，经常需要实现页面跳转并携带POST请求数据。本文将介绍如何在PHP中实现这一功能，并提供具...
    99+
    2024-04-02
  • 利用Spring jsonp如何在java项目中实现一个跨域请求
    本篇文章为大家展示了利用Spring jsonp如何在java项目中实现一个跨域请求，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。jsonp介绍    &nb...
    99+
    2023-05-31
    spring jsonp java 跨域请求
  • vue如何解决axios请求出现前端跨域问题
    本篇内容主要讲解“vue如何解决axios请求出现前端跨域问题”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue如何解决axios请求出现前端跨域问题”吧!在...
    99+
    2024-04-02
  • 如何进行JSONP跨域请求原理的深入解析
    这篇文章将为大家详细讲解有关如何进行JSONP跨域请求原理的深入解析，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。什么是同源策略同源策略，它是由Netscape提出的一个著名的安全策略。现在...
    99+
    2023-06-26
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作