webpack的devServer填写cookie方法

最新推荐文章于 2022-08-12 20:06:06 发布
最新推荐文章于 2022-08-12 20:06:06 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aexwx/article/details/105998664
版权

尝试了cookiePathRewrite和cookieDomainRewrite，但都没作用。

最后如图所示，才有效果

上述操作可以达到的效果：

abc.com所在的api如果需要cookie,比如用来验证用户身份。

那么我们本地发开用localhost访问时，是可以携带abc.com的cookie

缺点就是要自己提前去abc.com获取document.cookie并填写到webpack配置中

大猫会长
关注
专栏目录
webpack-dev-server 代理解决cookie丢失问题
weixin_34235105的博客
03-06 3400
问题 最近项目对接口进行安全改造,需要用到一个Path=/XXX/的cookie值,但是本地开发环境会出现cookie丢失的问题,因为本地开发环境目录都是http://localhost:8000/home,不会包含XXX路径,这样请求就会丢失用于安全的cookie. 解决方案 最简单粗暴的解决方案 修改项目目录,添加一个XXX的文件夹，把开发环境的需要的静态资源和页面文件放到XXX文件夹下，开发...
webpack-dev-server使用proxy跨域cookie问题
qq_36297981的博客
04-25 7947
如今前后端分离的的开发模式越来越成为主流，前后端分离的开发模式确实给开发带来了诸多便利， 但也带来了一些小问题，比如跨域的问题，因为前后端分开的开发模式，在开发过程中前端项目和后端项目运行在不同的源下，所以跨域问题成了前后端分离开发过程中的主要问题。 这几天，我在做一个前端小项目的时候也遇到了跨域问题，由于后台接口调用的是别人的接口，而该接口没有提供跨域访问，所以不得不使用webpack-dev-...
wepack-dev-server无法传递cookie到后端的问题
02-17 1617
目前我们的技术线采用了 webpack + vue的开发方式，前后端分离的模式。配置如下： 前后端分离本机dev开发 采用webpack-dev-server 启动本地localhost 请求转发到  部署在服务器上的后端代码 请求配置如下   '/lsmp':{ target:'http://10.1.90.49:127', changeOrigin:true, secure: false ...
http-proxy-middleware-secure-cookies:安全地将身份验证cookie添加到您的webpack-dev-server代理中
05-29
http-proxy-middleware-secure-cookies 安全地向 Webpack Dev Server 代理内的远程服务器发出经过身份验证的请求。 这个库可以帮助您创建一个 ，它可以安全地使用 cookie 发出代理请求。 它会在初始启动或身份验证失败时提示您输入身份验证 cookie。 问题陈述 想象一下，您有一个 API 后端和一个完全独立的前端。 后端的开发环境设置起来非常复杂，因此有时您更愿意让本地前端开发服务器直接请求生产服务或某些共享环境。 现在棘手的是生产服务可能需要身份验证。 您的本地代理必须携带身份验证标头或 cookie 才能向 API 服务发出请求。 此软件包使您可以更轻松地管理和安全地存储发出这些请求所需的凭据。 用法 在webpack.config.js ，添加devServer代理规则如下： const { secureCookieP
Webpack-dev-server，React，Fetch和Cookies
weixin_26738395的博客
08-24 165
Today’s fun. I’m using webpack-dev-server to serve up my React application as I develop it. I’m implementing JavaScript Web Tokens, with Refresh Tokens via an httpOnly cookie between domains via a fet...
在devServer中拦截请求，更改cookie
llq886的博客
01-26 1217
直接贴代码： devServer: { contentBase: __dirname + "/develop/", host: "localhost", port: 8000, historyApiFallback: false, inline: true, proxy: { '/proxy/': { target: 'http://www.bck.zero.net', changeOrigin: true, pathRewrite: { '
webpack配置代理及cookie
那一刻的博客
01-05 1223
const cookie = ''; //cookie值 const RefererPath = 'index.html' module.exports = { dev: { proxyTable: { '/api':{ //前缀 target: url, //目标地址 changeOrigin:true, //是否允许跨域 onProxyReq: function(proxyReq, req, res) {
真刀实战地搭建React+Webpack+Express搭建一个简易聊天室
soybean
08-17 1206
一、前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉。想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈。好了,可以停止bb了,说一下干货。 二、 这个项目能学到啥? 为了减少秒关文章的冲动。我得把好话放在前头。做了这个项目，我学会了….(对于我). 1. Webpack的配置以及各个参数概念都有一定的熟悉。 2. React+Webpack+Exp...
基于React16的电商后台管理系统项目--笔记
wuzhaoqing325的博客
03-03 1361
1.课前知识储备 资源加载过程 （1）URL解析 （2）DNS查询 DNS优化 在页面一加载时，就去这些域名的DNS服务器查询IP地址，并缓存下来，等到要请求这些域名下的资源时，省去了DSN查询的时间，提高了页面加载的速度。 （3）资源请求 （4）浏览器解析  1-在加载html时，开始构建DOM，碰到一个DOM节点，就将它放在DOM树中  2-在期间碰到一个JS文件，就需要停下构...
跨域问题及解决方案
weixin_44685906的博客
05-23 1063
跨域问题及解决方案前言问题引入同源策略跨域解决方案JSONPCORS跨站资源共享简单请求复杂请求响应头预检请求window.postMessage 前言 跨域请求的响应一般会被浏览器所拦截，注意，是被浏览器拦截，响应其实是成功到达客户端了。 问题引入 你打开了一个银行站点，然后又一不小心打开了一个恶意站点，如果没有安全措施，恶意站点就可以做很多事情： 修改银行站点的 DOM、CSSOM 等信息； 在银行站点内部插入 JavaScript 脚本； 劫持用户登录的用户名和密码； 读取银行站点的 Cookie、
vue webpack重写cookie路径的方法
10-16
webpack提供的反向代理服务器在开发阶段非常方便，几行简单的代码配置就可以使用反向代理功能，包括路径重写、cookie处理等。这篇文章主要介绍了vue webpack重写cookie路径,需要的朋友可以参考下
VUE安装教程以及组件库的使用
qq_42143163的博客
08-01 1801
一.单独VUE文件使用 下载vue.js单文件，然后在html文件中引入这个文件。例如： 。 单独使用vue.js问题 单独使用vue文件时，是在script标签中使用vue会有麻烦之处： 1：组件的样式不能隔离。 2：组建的模板如果写在组件对象中，则必须写成字符串格式，如果写在type=text/html的script标签中，则模板和js代码以及css代码都会分开写，不利于组件的维护。 所以使用...
浅谈Vue开发最佳实践—事项清单
m0_60028455的博客
04-22 2302
一 、通过云开发平台快速创建初始化应用 1.创建相关应用模版请参考链接：彻底学会快速部署vue框架，一篇就够了 2.完成创建后就可以在github中查看到新增的Vue.js 仓库 二 、 本地编写《开发跨平台桌面应用》项目 1.将应用模版克隆到本地 ● 首先假定你已经安装了Git、node，没有安装请移步node官网进行安装。克隆项目： git clone + 项目地址● 进入项目文件 cd Vue.js● 切换到feature/1.0.0 分支上 git checkout feature/1.0.0
webpack-proxy-重写set-cookie
yezitoo的博客
09-01 805
module.exports = { // ... devServer: { proxy: { '/api': { // ... onProxyRes: function(proxyRes, req, res) { const cookies = proxyRes.headers['set-cookie'] const cookiePathRegex = /(p|P)ath=\/\w*;/ .
vue开发环境手动配置Cookie
weixin_49698648的博客
08-12 1889
只需要在vue.config.js里devServer上面配置onProxyReq这个属性即可
session cookie重写
cch_cch的博客
06-10 715
在一些投票之类的场合，我们往往因为公平的原则要求每人只能投一票，在一些WEB开发中也有类似的情况，这时候我们通常会使用COOKIE来实现，例如如下的代码： if (cookies.lenght == 0 || cookies == null){ doStuffForNewbie(); //没有访问过 }else{ doStuffForReturnVisitor
Vue 本地跨域处理(包含cookie)
热门推荐
飞扬_柳絮的专栏
01-29 1万+
1、前端设置 main.js import axios from 'axios' axios.defaults.withCredentials = true; //允许axios请求携带cookie等凭证 2、后端设置 说明： 以下设置对同域情况下没影响 //当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无......
webpack：proxy中cookie无法保存的解决办法
weixin_43160044的博客
07-06 3825
这几天做个小项目遇到了跨域问题，于是就用了webpack的proxy解决，用的挺爽的，但是做到登录之后，因为服务端使用cookie和sessionid做登录状态保存的，结果就悲催了，我发现它没有将cookie保存起来，简单来说就是我们本地用的是localhost，与我们跨域所用的域名对不上，网上看了下几位大神的博客都对我的项目没有什么作用，于是我又看了下http-proxy-middleware的...
devServer.proxy完整options配置选项
Bug_MakerQAQ的博客
04-21 2307
target：要使用url模块解析的url字符串 forward：要使用url模块解析的url字符串 agent：要传递给http.squest的对象（请参阅Node的https代理和http代理对象） ssl：要传递给https.createServer（）的对象 ws：是/否，如果您想代理websocket xfwd：true / false，添加x-forward标头 secure：true...
webpack devserver proxy
最新发布
09-02
webpack devserver proxy是一个webpack devserver提供的功能，用于在开发环境中与后端API进行交互。 在开发环境中，前端开发人员通常需要与后端进行数据交互，比如发送请求获取数据或提交表单等。但是在开发环境中，由于前端和后端通常运行在不同的端口上，存在跨域访问的问题。而使用webpack devserver proxy可以解决这个问题。 proxy的作用是将前端发起的请求代理到后端API上，它可以将前端的请求通过配置的代理规则发送到后端，并将后端的响应返回给前端。 使用proxy的配置一般写在webpack配置文件中，可以通过设置proxy选项来配置代理的规则。例如： ``` module.exports = { // ... devServer: { proxy: { '/api': { target: 'http://localhost:8080', secure: false, changeOrigin: true } } } }; ``` 以上配置表示将所有以`/api`开头的请求代理到`http://localhost:8080`上。`secure`选项表示是否使用https，`changeOrigin`选项表示是否改变请求的Origin。 通过使用webpack devserver proxy，前端开发人员可以方便地在开发环境中与后端API进行交互，而无需担心跨域访问的问题。同时，可以根据实际需要配置多个代理规则，以满足不同API的需求。 总之，webpack devserver proxy是一个非常有用的功能，可以提高前端开发效率，同时也方便了前后端联调和调试工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值