Ant Design Pro 使用proxy无法设置cookies
Ant Design Pro 使用proxy无法设置cookies
近期使用ant design Pro 实现了一个内部的后台。用于提供一个简单界面访问一些用户和设备的数据。
但近期需要将系统交接给其他同事继续开发。想要在本地配置proxy连接后端服务器。
1 关于AntD Pro配置代理
1.1 关于为什么要配置代理
AntD Pro 是前后端分离的前端框架,在部署时,一般会将前端代码打包和后端代码部署同一个域名下,所以不会有跨域的场景。比如使用nginx 部署·
location / {try_files $uri $uri/ /index.html;}location /api {proxy_pass https://ant-design-pro.netlify.com;proxy_set_header X-Forwarded-Proto $scheme;proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;}
但开发阶段,AntD Pro也会监听自己的端口,和后端服务器使用不同的端口,界面访问后端接口,这就出触发跨域,导致被浏览器拦截。
什么是同源策略?
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
什么是跨域?
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
跨域问题的具体体现在浏览器上开发页面时,跨域的请求会被浏览器拦截。 请求url的协议、域名、端口一致则认为是同源。
所以为了方便开发,现在市面上所有的脚手架都提供了 proxy 的能力,底层基于 http-proxy-middleware, 这个包可以把所有符合正则匹配的请求转发到某个地址。这样就可以方便地进行开发。绕开同源策略带来与后端服务器交互问题。
其实也可以配置特殊Http Headers启用 CORS
来允许跨域来解决这个问题。
**
参考链接:https://pro.ant.design/blog/proxy-cn
1.2 如何配置代理
AntD Pro V4 是在config/proxy.js中配置代理。
// config/config.ts
export default {proxy: {'/api': {'target': 'http://jsonplaceholder.typicode.com/','changeOrigin': true,'pathRewrite': { '^/api' : '' },},},
}
注意 proxy 配置不会改变你本地请求的 url(依旧是 http://localhost:8000/api/xxx),但是会在本地服务转发到 target 上。
target: 要与url模块解析的url字符串
changeOrigin: true, //true为开启跨域代理
pathRewrite,用'^/api':''
, 把’/api’去掉。
比如后端接口为 http://jsonplaceholder.typicode.com/users
而前端为匹配 http://localhost:8000/api/users。 则可以将这个访问后端多出/api去掉。
详细的配置建议直接查看 webpack-dev 的配置。
2 无法设置cookie
在配置代理后访问后端服务器时,发现无法设置cookies。导致登录后不能跳转界面
但实际上,登录接口response 也返回了set-cookie 字段。那目前问题就是浏览器没有将set-cookies中的内容设置到aplication中。
这里发现有一个警告
问题就在这里了。因为后端服务器使用了https。而前端访问代理使用的是http。而后端返回的set-cookies 中的存在secure字段。所以导致浏览器处理cookies时发现Secure字段且当前地址为http,所以导致无法将存入到application中。
关于set-cookies中字段的内容 我们可以参考 MDN的说明
如果其中保留字段中的部分值与当前浏览器环境不一致则无法设置。
Secure:Cookie仅在使用该
https:方案发出请求时才发送到服务器(本地主机除外**)不安全的网站(
http:)无法使用
Secure`属性设置Cookie 。
Path:请求的URL中必须存在一个路径,否则浏览器将不会发送Cookie
标头。
Domain:如果省略,则默认为当前文档URL的主机,不包括子域。
如何解决?
使用 webpack-dev 的配置。使用onProxyRes 将Secure 字段拿掉。 当然这是你本地代理的情况下
onProxyRes: function (proxyRes) {const cookies = proxyRes.headers['set-cookie'];let newCookie;if (cookies) {const cookiePathRegex = /secure;/;newCookie = cookies.map((cookie) => {if (cookiePathRegex.test(cookie)) {// 替换return cookie.replace(cookiePathRegex, '');}return cookie;});delete proxyRes.headers['set-cookie'];proxyRes.headers['set-cookie'] = newCookie;}},
3 参考连接
https://www.yuque.com/mdtvv0/myv5bw/es2oeo
Ant Design Pro 使用proxy无法设置cookies相关推荐
- Ant Design Pro右上角个人设置管理
好久没有分享一下学习经验了,主要最近忙着毕业论文和毕业设计. 今天简单分享一下使用Ant Design Pro的时候领导让我删除顶部右上角的个人中心和触发报错. 其实也不是什么技术上的难题,主要就是找 ...
- 在Ant Design Pro(React)中使用ECharts
使用Ant Design Pro解决方案可以快速搭建前端框架,而ECharts是前端最流行,功能最强大的前端图表库. 下面将讲解下如何在Ant Design Pro使用ECharts. Ant Des ...
- Ant Design Pro -- 02项目结构@20210331
一.项目的目录结构 ├── config # umi 配置,包含路由,构建等配置 ├── docker # 部署 ├── functions # ├── mock # 本地模拟数据 ├── publi ...
- Ant Design Pro初探
Ant Design Pro 浅析 脚手架下载 Ant Design Pro 浅析 菜单映射 页面渲染 界面定义数据交互 后台数据交互 脚手架下载 软件环境:NodeJS,Git 下载步骤: 1.cl ...
- Ant Design Pro Vue使用心得
目录结构 ├── public │ └── logo.png # LOGO | └── index.html # Vue 入口模板 ├── src │ ├── api # Api ajax 等 │ ├ ...
- 基于ant design pro的前后端分离的小型餐馆管理系统
安装配置 前端 下载代码 antDesignProLearning-front 安装依赖,在命令行输入命令npm install或yarn 官方推荐使用 tyarn 来进行包管理,可以极大地减少 in ...
- ant design pro (八)构建和发布
一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...
- Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行
学习参考: electron-api-demos 我以下的方式,其实并把Ant Design Pro文件打包到生成的安装包里,所以,安装包=Ant Design Pro+Electron环境 ant- ...
- 使用ant design Pro开发项目的小结
一.关于上手. 1. 关于ant design Pro的介绍,自己看官网,大致上可以理解为ant design(组件库) ant design Pro (完整的项目) dva(路由 数据流管理)的组合 ...
最新文章
- 域迁移(降级)注意事项
- 父子组建传值_父子组件及兄弟组件传值demo
- MySQL安装教程图解
- linux间服务器间文件传输,Linux命令scp服务器间文件传输教程
- Magento 1.9.X 系列教程
- Web自动化测试中的接口测试
- 2015.12.20 自动化运维
- 面试题——股票利益最大化
- java中,数值计算时的类型转换 ( 两个int类型相加,赋值给double )
- 互联网介入对安防行业的影响
- sql基本语句返回值类型
- 焕新:CANape 19真香~
- c语言 四层电梯算法,电梯算法c语言
- 各种类型数据库以及其适用场景
- tensorflow的交叉熵函数_张量流的代价函数和四个交叉熵函数,与,tensorflow,四种
- android调试更换模拟器,Android建立模拟器进行调试(示例代码)
- Fater-Rcnn原理详解
- Ubuntu重启后nvidia-smi命令报错NVIDIA-SMI has failed because it couldn‘t communicate with the NVIDIA driver.
- iOS开发中解决第三方静态库符号冲突的终极方案
- linux 端口耗尽,短连接以致端口耗尽