浏览器对跨域请求携带Cookie的方法

这篇具有很好参考价值的文章主要介绍了浏览器对跨域请求携带Cookie的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


企业开发时会分开发环境、测试环境以及生产环境,但是有的企业开发只有真正发布到线上的生产环境的流程才会严格配置,有的项目开发环境或者测试环境中,前后端配置没有特别严格要求,就导致前端请求发送时返回错误信息。比如项目发送了一个跨域请求,该请求需要自动携带Cookie信息给服务器进行身份认证,但是浏览器对跨域的请求不会自动携带Cookie的数据,此时在生产环境中前后端配置正常该请求正常返回数据,但是在开发环境和测试环境中要求不严格,前后端没有配合设置好配置信息,导致请求无法自动携带Cookie信息返回失败的信息,以下有两种方法解决。

一、前后端协商配置

1.前端请求时在请求头中配置"withCredentials": true

2.服务端在响应头中配置"Access-Control-Allow-Origin", "http://xxx:${port}";

3.服务端在响应头中配置"Access-Control-Allow-Credentials", "true"

以下通过express实现后端服务器,利用简单的html页面模拟一个跨域请求的环境进行解释(ps:用其他语言的参考上方三点进行配置,此处只做简单的模拟)
浏览器对跨域请求携带Cookie的方法,前端问题及案例,跨域,前端,html,node

1.1 前端页面搭建

index.html
该页面由服务器app1托管,运行服务器后,浏览器输入localhost:3000,显示该页面

<!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({
        withCredentials: true,
        method: "get",
        url: "http://localhost:3002/crossList",
      }).then((res) => {
        console.log(res);
      });
    };

  </script>

</body>

</html>

1.2后端服务器搭建

app1.js

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

// 设置`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: 0, user });
});

// 静态资源在public目录下,托管`index.html`页面
/* 
这样访问http://localhost:3001就是index.html搭建的页面,此时在index.html中发起的请求,
默认的源就是`http://localhost:3001`,然后再去请求`http://localhost:3002`就会出现跨域
*/
app.use("/", express.static("public"));
  
app.listen(3001, () => {
  console.log(`Example app listening on port 3001`)
})

app2.js


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

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

// 定义一个跨域接口(因为端口不同)
app.get("/crossList", (req, res) => {
  const user = req.headers.cookie.split("=")[1];
  res.json({ code: 200, msg: "这是3002端口返回的" +user});
});

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

结果:
页面初始化,返回登录结果,浏览器中存储返回的Cookie信息
浏览器对跨域请求携带Cookie的方法,前端问题及案例,跨域,前端,html,node

浏览器对跨域请求携带Cookie的方法,前端问题及案例,跨域,前端,html,node

浏览器对跨域请求携带Cookie的方法,前端问题及案例,跨域,前端,html,node
配置前,发送跨域请求返回失败信息
浏览器对跨域请求携带Cookie的方法,前端问题及案例,跨域,前端,html,node

配置后,发送跨域请求返回需要的信息
浏览器对跨域请求携带Cookie的方法,前端问题及案例,跨域,前端,html,node

参考文章:面试官问:跨域请求如何携带cookie?

二、配置允许跨域浏览器

如何配置可跨域的浏览器,看这里Chrome浏览器的跨域设置
配置完成后,可自动携带Cookie
浏览器对跨域请求携带Cookie的方法,前端问题及案例,跨域,前端,html,node

三、Chrome浏览器安装ModHeader插件

此为一种特殊情况,公司在本地开发代码是登录项目时使用的是已经发布到开发环境的登录地址,本地开发无登录的入口,所以登录时转跳的也是已经部署后的开发环境,而不是本地开发时的页面,无法将Cookie信息存入,此事后就会需要使用可跨域的浏览器,并安装插件配合使用

ModHeader它可以用来自定义HTTP请求头或重写响应头,包含覆盖Chrome浏览器请求头的默认值。
此处已经下载好了直接用就可
链接:https://pan.baidu.com/s/1uoiAq1yBL4PbIrC284k6uw?pwd=9xhh
提取码:9xhh

在Chrome浏览器中,点击右上角三个点->扩展程序->管理扩展程序->将下载好的文件拖入扩展程序管理页面中
浏览器对跨域请求携带Cookie的方法,前端问题及案例,跨域,前端,html,node
然后在浏览器右上角固定该插件,点击该插件选择+MOD就可配置请求头信息了,配置完成后,在允许跨域的浏览器中发送请求,当发送请求时会请求头会携带配置好的信息
浏览器对跨域请求携带Cookie的方法,前端问题及案例,跨域,前端,html,node

浏览器对跨域请求携带Cookie的方法,前端问题及案例,跨域,前端,html,node

参考文章:ModHeader插件使用说明文章来源地址https://www.toymoban.com/news/detail-599643.html

到了这里,关于浏览器对跨域请求携带Cookie的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 谷歌浏览器(chrome)允许跨域/允许https网站中发送http请求

    直接上方法了 第一步:对谷歌浏览器图标点击鼠标右键,打开属性面板 第二步:在下图位置,添加下列代码 原来启动浏览器的地址: C:UsersxxxxxAppDataLocalGoogleChromeApplicationchrome.exe 增加的代码(注意开头是有个空格的,要把两部分用空格隔开的): --args --disable-web-secu

    2024年02月02日
    浏览(59)
  • 爬虫之Cookie获取:利用浏览器模拟一个cookie出来、面对反爬虫、加密的cookie的应对方法

    在爬虫或模拟请求时,特别是获取验证码的时候,反爬虫的网站的cookie或定期失效,复制出来使用是不行的 为了应对这种方式,我们可能就需要像浏览器打开网站一样,取得它信任的cookie selenium就是一个很好的手段 一、什么是selenium Selenium最初是一个自动化测试工具,Selen

    2024年01月16日
    浏览(42)
  • vue 关于清除浏览器全部cookie的问题及解决方法(绝对有效)

    1、问题描述 我们在日常开发中,有本地调试,有多个服务器的线上调试部署。从中我观察到, 每次使用同一浏览器,如果再次登录时我们没有清理缓存,会有很多匪夷所思的问题 。比如:token在cookie里保存,导致登录失效。多个角色登录时明明token已经更新,但使用的还是

    2023年04月17日
    浏览(31)
  • Python flask跨域支持(Access-Control-Allow-Origin(CORS)跨域资源共享(访问控制允许来源:允许指定的来源进行跨域请求)浏览器同源策略、OPTIONS预检请求

    浏览器的同源策略(Same-Origin Policy)限制了跨域请求,如果不进行特殊处理,跨域请求将被浏览器拦截。 接口支持跨域能够允许浏览器跨域请求不被浏览器拦截。 下面是跨域请求的一些影响、优点和缺点: 优点 允许不同域名下的应用程序进行数据交互,提高了系统的灵活性

    2024年02月11日
    浏览(40)
  • Vue3配置代理解决跨域请求及携带Cookie问题

    在前后端开发的过程中,经常涉及跨域请求的问题。 跨域请求。 axios发送请求时携带cookie,用于后端用户认证。 问题1解决: 给vue3配置代理服务器,后台无需进行跨域请求配置。在 vue.config.js 配置文件中进行配置。添加一下代码 问题2解决: 配置axios发送请求的时候带上co

    2024年01月16日
    浏览(59)
  • 【谷歌浏览器】中(Mixed Content错误,即是https请求http在浏览器中出现的错误)的解决方法

    一、问题详情 Mixed Content: The page at ‘https://xxx’ was loaded over HTTPS, but requested an insecure test ‘http://xxx’. This request has been blocked; the content must be served over HTTPS. 注:上图中蓝色标记的【test】是http请求最后一级目录的,也就是展示当前出现问题的目录。 二、解决方

    2024年02月13日
    浏览(55)
  • 浏览器跨域

    生活中的事跟跨域有什么关系,那必须有。 跨域的产生是浏览器的安全机制引起的,只有在使用Ajax时才会发生。简单来说就是你可以通过ajax发送请求,但要看远程服务器脸色,他没授权,浏览器这个老六就给拦截了,不能用这个结果,像极了游戏机让买不让玩。 跨域(Cr

    2024年02月10日
    浏览(33)
  • 浏览器跨域问题

    违背 同源策略 就是跨域。 同源策略 : 网页的url 和 该网页请求的url 的协议、域名、端口必须保持一致。 协议、域名、端口必须保持一致. 同源策略存在的原因: 保护用户隐私和防范网络攻击(https://editor.csdn.net/md?not_checkout=1spm=1011.2415.3001.6217articleId=132763789) 即如果网页请求的

    2024年02月09日
    浏览(33)
  • 深入解析浏览器Cookie(图文码教学)

    本博主将用CSDN记录软件开发求学之路上亲身所得与所学的心得与知识,有兴趣的小伙伴可以关注博主! 也许一个人独行,可以走的很快,但是一群人结伴而行,才能走的更远! Cookie 翻译过来是饼干的意思。 Cookie是一种用于在客户端浏览器和服务器之间进行状态跟踪的技术

    2024年02月16日
    浏览(33)
  • Python + Selenium 处理浏览器Cookie

    工作中遇到这么一个场景:自动化测试登录的时候需要输入动态验证码,由于某些原因,需要从一个已登录的机器上,复制cookie过来,到自动化这边绕过登录。 浏览器的F12里复制出来的cookie内容是文本格式的: 这里需要把cookie文本处理为name和value格式的字典形式,这个是S

    2024年02月13日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包