当前位置: 首页 > news >正文

vue.config.js devServer中changeOrigin的作用

问题

vue开发时,为了解决前端跨域问题,通常在vue.config.js配置 devServer proxy

devServer: {proxy:{'/api': {target: 'http://b.com',changeOrigin: false},},
}

官方文档http-proxy options对changeOrigin的解释

option.changeOrigin: true/false, Default: false - changes the origin
of the host header to the target URL

比如,浏览器地址栏是http://a.com/some/path,那么/api开头的请求会被代理到http://b.com

  • 未配置changeOrigin(默认为false)
    • 那么b.com收到的http 请求头中origin是http://a.com,也就是说默认的,与地址栏中的一样;
  • changeOrigin:true
    • b.com收到的请求头中origin是http://b.com

origin vs host

  • origin通常用来限制跨域,相应的服务器端需要响应Access-Control-Allow-Origin:“some.domain.com”,浏览器据此判断是否允许跨域;some.domain.com可以是通配符*,表示允许所有域名跨域;
  • host用来实现基于域名的虚拟主机,可参考Name-based virtual hosts

总结

ajax跨域请求时,浏览器知道请求是跨域,给请求头中添加origin,服务器端收到后,可返回Access-Control-Allow-Origin,浏览器据此判定是否允许跨域;当然了还有Access-Control-Allow-Credentials、Access-Control-Allow-Headers、Access-Control-Allow-Methods;
使用代理后,ajax请求是同域请求,浏览器不会在请求头中添加origin,changeOrigin false或者true,只能影响接收者收到的origin,不能影响是否跨域,除非服务器端做了限制。也就是说,只要配置了devServer,changeOrigin 配置仅影响请求头中的origin;

相关文章:

vue.config.js devServer中changeOrigin的作用

问题 vue开发时,为了解决前端跨域问题,通常在vue.config.js配置 devServer proxy devServer: {proxy:{/api: {target: http://b.com,changeOrigin: false},}, }官方文档http-proxy options对changeOrigin的解释 option.changeOrigin: true/false, Defa…...

基于Ubuntu 20.04 LTS上部署MicroK8s(最小生产的 Kubernetes)

目录 文章目录 目录简介Kubernetes简介MicroK8s简介Ubuntu系统MicroK8s的优势安装环境基本要求执行安装命令加入群组(使用非 root 用户访问)开启 dashboard 仪表盘查看服务名称查看仪表盘开放的端口打开浏览器检查状态打开你想要的服务(使用附加组件)开始使用 microk8s访问 Kub…...

Spring:项目中的统一异常处理和自定义异常

介绍异常的处理方式。在项目中,都会进行自定义异常,并且都是需要配合统一结果返回进行使用。 1.背景引入 (1)背景介绍 为什么要处理异常?如果不处理项目中的异常信息,前端访问我们后端就是显示访问失败的…...

有点快要跟不上时代的感觉

团队的群里面有一个同事突然问了下,下面的这个 JavaScript 如何进行优化 var startIndex (start undefined || start null) ? null : start[0].Value;看上面的代码就是典型的判断和返回的问题。 如果是要调试的话也不是做不出来,但可能要花点时间&a…...

【pytorch】pytorch入门4:神经网络的卷积层

文章目录 前言一、定义概念 缩写二、性质三、代码总结参考文献 前言 使用 B站小土堆课程的笔记 一、定义概念 缩写 卷积层是神经网络中用于突出特征来进行分类任务的层。 二、性质 卷积核例子:vgg16 model 三、代码 添加库 python代码块import os import …...

【机器学习】探索LSTM:深度学习领域的强大时间序列处理能力

目录 🍔 LSTM介绍 🍔 LSTM的内部结构图 2.1 LSTM结构分析 2.2 Bi-LSTM介绍 2.3 使用Pytorch构建LSTM模型 2.4 LSTM优缺点 🍔 小结 学习目标 🍀 了解LSTM内部结构及计算公式. 🍀 掌握Pytorch中LSTM工具的使用. &…...

QT学习笔记之文件操作

你千万不要跟任何人谈起任何事。你只要一谈起&#xff0c;就会想念起每一个人来。 在ui界面添加一个LineEdit(lEt)、QPushButton(btn)、QWidget widget.cpp #include "widget.h" #include "ui_widget.h" #include <QFile> #include <QFileDialo…...

Mybatis XML配置文件操作数据库

Mybaits在操作数据库时&#xff0c;可以有两种方式&#xff1b;第一种是使用注解的方式操作&#xff0c;另一种是使用XML配置文件的方式&#xff1a;一般而言&#xff0c;若没有特别的要求&#xff0c;则编写一些简单的SQL语句&#xff0c;可以直接使用注解的方式&#xff1b;编…...

Ansible-template模块动态生成特定文件

文章目录 一、Jinja2介绍什么是主要特性安装基本用法进阶特性总结 Jinja2与Ansible关系1. 模板引擎2. Ansible 的依赖3. 变量和模板4. 动态生成配置5. 社区和生态系统总结 二、Ansible如何使用Jinja2使用template模块Jinja2文件中使用判断和循环Jinja2文件中使用判断语法 Jinja…...

【Hadoop】【vim编辑器】【~/.bashrc 文件】如何编辑

1. 进入 vim 编辑器 在终端中输入以下命令&#xff1a; vim ~/.bashrc 2. 进入插入模式 打开文件后&#xff0c;你将处于普通模式。在普通模式下&#xff0c;你不能直接编辑文本。 要进入插入模式&#xff0c;请按下 i 键。这时&#xff0c;你应该会看到屏幕底部出现 -- 插…...

vs code自动报错

让vs code自动报错&#xff0c; 点击插件 → 搜索error lens → 点击install&#xff0c; 下载完后&#xff0c;编写的代码有问题就会自动报错了。 5、修改默认缩进字符 点击设置&#xff08;settings&#xff09; → 点击常用设置 → 修改字符缩进。...

详细分析Nginx中的proxy_pass 末尾斜杠

目录 前言1. 基本知识2. Demo 前言 对于Nginx的讲解&#xff0c;更多推荐阅读&#xff1a; Nginx配置静态网页访问&#xff08;图文界面&#xff09;Nginx将https重定向为http进行访问的配置&#xff08;附Demo&#xff09;Nginx从入门到精通&#xff08;全&#xff09;详细分…...

数据结构:双指针—移动0(OJ283)

给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0]示例 2: 输入: nums [0] 输出: […...

LeetCode - 850 矩形面积 II

题目来源 850. 矩形面积 II - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你一个轴对齐的二维数组 rectangles 。 对于 rectangle[i] [x1, y1, x2, y2]&#xff0c;其中&#xff08;x1&#xff0c;y1&#xff09;是矩形 i 左下角的坐标&#xff0c; (xi1, yi1) 是该…...

Jenkins Pipeline 中通过勾选参数来控制是否构建 Docker 镜像

1.定义参数&#xff1a; 使用 booleanParam 定义一个布尔参数&#xff0c;示例如下 booleanParam(name: BUILD_DOCKER, description: 是否构建Docker镜像, defaultValue: false)2.使用参数&#xff1a; 在 stage 中&#xff0c;根据参数的值决定构建方式&#xff1a; stage(编…...

C++入门基础知识86(实例)——实例11【计算自然数之和】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于计算自然数之和相关内容&#xff01; 关…...

ChatGPT与R语言融合技术在生态环境数据统计分析、绘图、模型中的实践与进阶应用

自2022年GPT&#xff08;Generative Pre-trained Transformer&#xff09;大语言模型的发布以来&#xff0c;它以其卓越的自然语言处理能力和广泛的应用潜力&#xff0c;在学术界和工业界掀起了一场革命。在短短一年多的时间里&#xff0c;GPT已经在多个领域展现出其独特的价值…...

OpenAi以及Dify结合生成Ai模型

文章目录 1、Dify介绍2、使用 Dify3、部署Docker1.系统要求2.系统虚拟化3.下载docker 4、安装WSL1.检查是否已经安装 五、访问系统六、添加模型 1、Dify介绍 Dify官方地址。 Dify 是一个开源的 LLM 应用开发平台。其直观的界面结合了 AI 工作流、RAG 管道、Agent、模型管理、…...

【漏洞复现】用友 UFIDA /portal/pt/file/upload 任意文件上传漏洞

免责声明: 本文内容旨在提供有关特定漏洞或安全漏洞的信息,以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步,并非出于任何恶意目的。阅读者应该明白,在利用本文提到的漏洞信息或进行相关测试时,可能会违反某些法律法规或服…...

C:内存函数

目录 前言&#xff1a; 一、memcpy 函数的使用及实现 1、memcpy函数的介绍 1.1 memcpy函数参数解读 2、memcpy函数的使用 3、memcpy函数的模拟实现 二、memmove函数的使用及模拟 1、memmove函数的使用 2、memmove函数的模拟实现 三、memset 函数的使用 1、memset函数的…...

Linux多网卡主机路由检查方法

Linux多网卡主机路由检查方法多网卡主机在 Linux 环境中并不少见。它们可能用于业务隔离、管理面分离、双线接入、内外网分流或高可用部署。但多网卡也意味着更复杂的路由行为。很多“这台机器能 ping 通但服务异常”“流量出去后回不来”的问题&#xff0c;最终都与路由选择有…...

专业解析开源AI浏览器助手:Page Assist的深度技术架构与实战应用

专业解析开源AI浏览器助手&#xff1a;Page Assist的深度技术架构与实战应用 【免费下载链接】page-assist Use your locally running AI models to assist you in your web browsing 项目地址: https://gitcode.com/GitHub_Trending/pa/page-assist Page Assist是一款革…...

PPPoE协议全解析:从原理到实践,打通家庭宽带连接第一关

1. 项目概述&#xff1a;从“猫”到世界的旅程每次打开网页、刷起视频&#xff0c;你有没有想过&#xff0c;你家的宽带究竟是怎么连上互联网的&#xff1f;这背后其实是一场从你家客厅到全球数据中心的精密“接力赛”。而这场接力赛的第一棒&#xff0c;也是最关键的一棒&…...

SLO-Warden:基于错误预算的智能SLO守护平台设计与实践

1. 项目概述&#xff1a;一个面向SLO的智能守护者在云原生和微服务架构成为主流的今天&#xff0c;服务的稳定性和可靠性不再是“锦上添花”&#xff0c;而是“生死攸关”的底线。作为一线的运维工程师或SRE&#xff0c;我们每天都在和各种监控指标、告警风暴作斗争。传统的监控…...

避坑指南:连接UR5实体机械臂与ROS MoveIt时,你最容易忽略的这3个配置细节

避坑指南&#xff1a;连接UR5实体机械臂与ROS MoveIt时&#xff0c;你最容易忽略的这3个配置细节 当仿真环境中的UR5机械臂完美运行MoveIt规划路径&#xff0c;却在切换到实体设备时遭遇连接失败&#xff0c;这种落差感往往源于几个隐蔽的配置陷阱。本文将从工业现场调试经验出…...

Imagine Engine时间线管理:掌握游戏节奏的完整教程 [特殊字符]

Imagine Engine时间线管理&#xff1a;掌握游戏节奏的完整教程 &#x1f3ae; 【免费下载链接】ImagineEngine A project to create a blazingly fast Swift game engine that is a joy to use &#x1f680; 项目地址: https://gitcode.com/gh_mirrors/im/ImagineEngine …...

百度网盘秒传链接终极指南:免费在线转存、生成与转换全攻略

百度网盘秒传链接终极指南&#xff1a;免费在线转存、生成与转换全攻略 【免费下载链接】baidupan-rapidupload 百度网盘秒传链接转存/生成/转换 网页工具 (全平台可用) 项目地址: https://gitcode.com/gh_mirrors/bai/baidupan-rapidupload 还在为百度网盘文件分享的繁…...

GHelper终极指南:3步掌握华硕笔记本性能控制秘籍

GHelper终极指南&#xff1a;3步掌握华硕笔记本性能控制秘籍 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivobook, Zenbook, Expertb…...

高效风扇控制完全指南:5步打造静音散热系统

高效风扇控制完全指南&#xff1a;5步打造静音散热系统 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/FanContro…...

别再死记硬背了!图解STM32按键状态机:从消抖到双击识别的完整逻辑(蓝桥杯适用)

图解STM32按键状态机&#xff1a;从消抖到双击识别的可视化逻辑拆解 在嵌入式开发中&#xff0c;按键处理看似简单&#xff0c;实则暗藏玄机。许多初学者在实现短按、长按和双击识别时&#xff0c;往往陷入代码调试的泥潭——明明逻辑看起来正确&#xff0c;实际运行却总出现误…...