vue-cli4.x 中 配置允许跨域请求

在这里插入图片描述
在项目根目录下创建vue.config.js文件:

在这里插入图片描述
vue.config.js:

module.exports = {devServer: {host: 'localhost',port: 8080,https: false,open: false, // 配置自动启动浏览器hotOnly: true, // 是否热更新proxy: {'/api': { // 路径中有 /api 的请求都会走这个代理target: 'http://127.0.0.1:5000/api/', // 要访问的接口域名ws: true, // 是否启用  websockets// secure: false,changeOrigin: true,// 开启代理:在本地会创建一个虚拟服务端,// 然后发送请求的数据,并同时接收请求的数据,// 这样服务端和服务端进行数据的交互就不会有跨域问题pathRewrite: {'^/api': '' // 这里理解成用/api代替target里面的地址,即去掉路径中的/api  的这一截}}}}
}

/api实际上是一层拦截,当我们前端访问到这个路由时,会自动代理到我们taregt中的内容,然后将

changeOrigin改为true,这句话的意思时是否将主机头的原点更改为目标的请求头。pathRewrite是将api路由地址更改为某一个值,我们这里给空。

​ 我们这里的服务器使用的是nodejs,且端口为5000,我们web项目服务器端口为8080,因此这里web端访问服务器时就会跨域。
在这里插入图片描述
由上图课之,请求成功了,解决了跨域问题,接着我们再看一下Request URL中的内容,我们发现这里的主机名以及端口都是我们前端web服务器的。就好像这个接口是我们同源下的接口,然后内部实际上访问的是http://127.0.0.1:5000/api/users/register

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470442.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎样不停请求接口实现实时刷新_快狗打车实时数仓和基于Hologres的数据服务建设...

前言 数据的实时化是最近几年数据行业很重要的趋势,我们在去年底也建立起新一代的实时数仓,但是在数据应用上一直没有取得很大的突破,我们希望实时数仓不仅仅是支撑大屏、核心实时报表、个别实时应用等简单的场景,希望更大…

Vuex在项目中使用

案例1: 案例2: Token 是用户登录成功之后服务端返回的一个身份令牌,在项目中的多个业务中需要使用到 校验页面的访问权限 访问需要授权的 API 接口 … 但是我们只有在第一次用户登录成功之后才能拿到 Token。 所以为了能在其它模块中获取…

Vue移动端项目——Vant 移动端 REM 适配

Vant官方文档 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 rem lib-flexible 用于设置 rem 基准值 下面我们分别将这两个工具配…

Win7_刻录DVD

1、刻录 临时文件夹: 1.1、C:\Users\具体的用户名\AppData\Local\Microsoft\Windows\Burn 1.2、双击 插入刻录盘的光驱,直接将文件复制到 这里,实际上也就是 复制到 上面的文件夹中。 2、UltraISO 的 路径: C:\Users\33\AppData\L…

findbugs使用_FindBugs,一个帮你找bug的IDEA插件

前言 Findbugs很多人都并不陌生,Eclipse中有插件可以帮助查找代码中隐藏的bug,IDEA中也有这款插件。这个插件可以帮助我们查找隐藏的bug,比较重要的功能就是查找潜在的null指针。 在编写代码的过程中,我们可能不会一直记得检查空的引用,在我们测试时可能…

Vue移动端项目——字体图标的使用

使用 iconfont 制作字体图标 设计师为我们单独提供了设计稿中的图标,为了方便使用,我们在这里把它制作为字体图标。 制作字体图标的工具有很多,在这里我们推荐大家使用:https://www.iconfont.cn/。 (1)登…

docker 虚拟机搭建mongodb一主一从一复制_云计算学习路线图素材课件:Docker容器应用场景分析...

Docker容器是一个开源的应用容器引擎,它能够自动执行重复性任务,例如搭建和配置开发环境,用户可以方便地创建和使用容器,还可以进行版本管理、复制、分享、修改。有很多初学云计算的同学不清楚Docker容器的使用方法以及应用场景&a…

Vue项目中 css样式的作用域(深度作用选择器)

vue官方文档 父组件对子组件设置的样式,只能作用到子组件的根节点上!!!

git 提交文件_git原理与实战

一,序言之前在工作中也接触过git,但是没有在现公司这里用的功能这么多。主要的差异体现在如下两个方面:1,之前公司使用git主要基于图形用户界面,这对于处理冲突非常有帮助,不太容易改错地方;而现…

CSS——设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)

设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)

CPU结构与指令执行过程简介

CPU(Central Processing Unit)是计算机中进行算术和逻辑计算处理指令的主要部件. CPU结构 CPU由通用寄存器组,运算器,控制器和数据通路等部件组成. 寄存器包括 数据寄存器: AX,BX,CX,DX; 指针与变址寄存器:SP, BP, SI,…

mysql连接池_数据库技术:数据库连接池,Commons DbUtils,批处理,元数据

Database Connection PoolIntroduction to Database Connection Pool实际开发中“获得连接”或“释放资源”是非常消耗系统资源的两个过程,为了解决此类性能问题,通常情况我们采用连接池技术,来共享连接 Connection。这样我们就不需要每次都创…

关于第三方图片资源403问题

为什么文章列表数据中的好多图片资源请求失败返回 403? 这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容,而第三方平台对图片资源做了防盗链保护处理。 1. 第三方平台怎么处理图片资源保护的? 服务端一般使用 Referer 请求头…

hdfs复制文件夹_HDFS常用命令

一.HDFS命令行Hadoop help命令的使用1.hadoop -help查询所有Hadoop Shell支持的命令2.distcp这是Hadoop下的一个分布式复制程序,可以在不t同的HDFS集群间复制数据,也可以在本地文件间复制数据。hadoop distcp将/test/test.txt文件复制到/test/cp下面&…

处理相对时间(Day.js、Moment.js)(案例:结合vue的过滤器使用)

推荐两个第三方库: Moment.jsDay.js 两者都是专门用于处理时间的 JavaScript 库,功能差不多,因为 Day.js 的设计就是参考的 Moment.js。但是 Day.js 相比 Moment.js 的包体积要更小一些,因为它采用了插件化的处理方式。 Day.js…

下载 嵌入式qt实战教程pdf_Qt之JSON教程-实战篇

以实战例子讲述JSON三兄弟的后续故事。实战一:发送JSON网络请求作为JSON老大哥的QJsonValue自知对面的大户人家妹子貌美如花,心里已经打起算盘,先下手为强,后下手遭殃。决定显示下自己的家底,想起这件事,老…

Vue移动端项目——搜索联想建议功能的实现(结合watch属性和使用lodash防抖节流)

搜索联想建议 1. 基本思路: 当搜索框输入内容的时候,请求加载联想建议的数据 将请求得到的结果绑定到模板中 2. 基本功能 一、将父组件中搜索框输入的内容传给联想建议子组件 二、在子组件中监视搜索框输入内容的变化,如果变化则请求获取…

.net get set 初始化_.NET项目升级:可为空引用

(给DotNet加星标,提升.Net技能)转自:波多尔斯基cnblogs.com/podolski/p/12692888.html前言C#8引入了新特性:可为空引用https://docs.microsoft.com/zh-cn/dotnet/csharp/nullable-references这个功能个人觉得挺好的,能够非常明确的…

用GDB排查Python程序故障

某Team在用Python开发一些代码,涉及子进程以及设法消除僵尸进程的需求。实践中他们碰上Python程序非预期退出的现象。最初他们决定用GDB调试Python解释器,查看exit()的源头。我听了之后,觉得这个问题应该用别的调试思路。帮他们排查这次程序故…

解决后端返回数据中的大数字问题(使用第三方包json-bigint )

JavaScript 能够准确表示的整数范围在-2^53到2^53之间(不含两个端点),超过这个范围,无法精确表示这个值,这使得 JavaScript 不适合进行科学和金融方面的精确计算。 Math.pow(2, 53) // 90071992547409929007199254740…