vue如何发送请求给后端(包括前后端跨域)

目录

  • 有哪些方法可以发送请求
  • 要请求先解决跨域问题
    • 代理服务器
    • 后端解决跨域问题
  • axios发送请求
  • vue-resource发送请求

有哪些方法可以发送请求

以前可能了解过:

  1. xhr 即:new XMLHttpRequest()
  2. jQuery 即:$.get $.post
  3. axios
  4. fetch
在vue中特有的: 5.vue-resource
在vue中常见的有3.**axios**和5.**vue-resource**
下面介绍如何使用axios和vue-resource

要请求先解决跨域问题

什么是域: 协议(http/https),域名和端口
什么是跨域:协议,域名和端口三个条件前后端不一致
在这里插入图片描述
跨域问题来自前端:前端向后端发送请求获取到回复后,发现后端和自己的域(三要素)有不一致的,不将数据返回给我们(用户)。


代理服务器

代理服务器位于前端,同样是8080端口,所以没有跨域问题,而服务器之间的通信不存在跨域这个问题,所以问题解决了
在这里插入图片描述
有两个方法配置代理服务器:1.nginx 2.vue-cli
我们采用第二种简单点的方法:
在根目录vue.config.js中配置:
在这里插入图片描述

changeOrigin可能还是不明白:他就是欺骗服务器的,打开时,代理服务器向后端服务器发送请求时,就骗后端服务器,我也是后端服务器地址(上面例子就是5000端口),关闭就是8080端口。
作用:如果后端服务器限制只能自己的端口请求,就必须打开。所以我们一般打开

使用时添加一个后缀:
在这里插入图片描述
respones是成功的返回值,返回的数据在response.data中
error为失败的返回值,返回的错误消息在error.message中
这是axios的方法

后端解决跨域问题

另外后端也能解决跨域问题,即CORS
这里略,就相当于返回时加入特殊响应头请求前端给用户
具体方法可以搜springboot跨域,这里不做具体配置

axios发送请求

安装axios:npm i axios

注意:下面时没有经过代理服务器的代码
在这里插入图片描述

vue-resource发送请求

安装vue-resource:npm i vue-resource

引入vue-resource
在这里插入图片描述

使用时(即把axios换成this.$http):
在这里插入图片描述

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

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

相关文章

数据安全能力成熟度模型(DSMM)

DSMM的架构由以下三个维度构成: a) 安全能力维度 安全能力维度明确了组织在数据安全领域应具备的能力,包括组织建设、制度流程、技术工具和人员能力。 b)能力成熟度等级维度 数据安全能力成熟度等级划分为五级,具体包括&…

笔试强训未见过题(个人向)

1.游游的水果大礼包 题目 解析 我们设卖出价值为c,卖出x个一号礼包,y个二号礼包。则caxby,那么就可以一一枚举,x的最大值为min(a/2,b),则y就为min(a-2*min,…

《C++的类型转换》

目录 一、c语言中的类型转换 1、隐式类型转化: 2、强制类型转化: 3、缺点 二、c新的类型转换 1、内置类型转为自定义类型 3、自定义类型转换为内置类型 三、C的规范的强制类型转换 1、C新增四种规范的类型转换的原因 2、static_cast 3、reint…

PotatoPie 4.0 实验教程(29) —— FPGA实现摄像头图像均值滤波处理

图像的均值滤波简介 图像均值滤波处理是一种常见的图像处理技术,用于降低图像中噪声的影响并平滑图像。该方法通过在图像中滑动一个固定大小的窗口(通常是一个正方形或矩形),将窗口中所有像素的值取平均来计算窗口中心像素的新值…

【Android】SharedPreferences阻塞问题深度分析

前言 Android中SharedPreferences已经广为诟病,它虽然是Android SDK中自带的数据存储API,但是因为存在设计上的缺陷,在处理大量数据时很容易导致UI线程阻塞或者ANR,Android官方最终在Jetpack库中提供了DataStore解决方案&#xf…

数据结构——插入排序

基本思想: 直接插入排序是一种简单的插入排序法,其基本思想是:把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中,直到所有的记录插入完为止,得到一个新的有序序列 。 实际中我们玩扑克牌时&…

1146. 快照数组

java版本 class SnapshotArray {int id 0;List<int[]>[] snapshots;public SnapshotArray(int length) {snapshots new List[length];for (int i 0; i < length; i) {snapshots[i] new ArrayList<int[]>();}}public void set(int index, int val) {snapsho…

XYCTF-部分web总结

这个月在XYCTF中写了部分web题&#xff0c;题中学到在此记录一下 ezhttp 打开就是一个简单的登录页面 f12说藏在一个地方&#xff0c;先想到的就是robots.txt 访问直接给账号密码 username: XYCTF password: JOILha!wuigqi123$登录后: 明显考源跳转&#xff0c;修改referer值…

如何查看 UUID 是那个版本

UUID 是有多个版本的&#xff0c;如何查看 UUID 是那个版本&#xff0c;可以用 UUID 对象中的 version() 方法。 创建 UUID 对象&#xff1a; UID originalUUID UUID.fromString("cc5f93f7-8cf1-4a51-83c6-e740313a0c6c"); uuid.version();上面方法显示 UUID 的版本…

通用模型Medprompt如何在医学领域超越专家系统

在AI的发展历程中&#xff0c;一直存在着两种理念的较量&#xff1a;一种是追求普适性的通用AI模型&#xff0c;另一种是针对特定领域深度优化的专业AI系统。最近&#xff0c;微软的研究团队在这一辩论中投下了一枚重磅炸弹——他们开发的Medprompt策略&#xff0c;使得通用AI模…

Gin框架入门(四)—中间件

文档 官方文档&#xff1a;https://godoc.org/github.com/gin-gonic/gin 官方地址&#xff1a;https://github.com/gin-gonic/gin 中间件&#xff1a;https://gin-gonic.com/zh-cn/docs/examples/using-middleware 无中间件 func main() {//创建一个无中间件路由r : gin.New…

前端用a标签实现静态资源文件(excel/word/pdf)下载

接上文实现的 前端实现将二进制文件流&#xff0c;并下载为excel文件后&#xff0c; 实际项目中一般都会有一个模版下载的功能&#xff0c;一般都由服务端提供一个下载接口&#xff0c;返回文件流或url地址&#xff0c;然后前端再处理成对应需要的类型的文件。 但是&#xff…

本地CPU搭建知识库大模型来体验学习Prompt Engineering/RAG/Agent/Text2sql

目录 1.环境 2.效果 3.概念解析 4.架构图 5. AI畅想 6.涉及到的技术方案 7. db-gpt的提示词 1.环境 基于一台16c 32G的纯CPU的机器来搭建 纯docker 打造 2.效果 3.概念解析 Prompt Engineering &#xff1a; 提示词工程 RAG&#xff1a; 检索增强生成&#xff1b; …

【源码】IM即时通讯源码/H5聊天软件/视频通话+语音通话/带文字部署教程

【源码介绍】 IM即时通讯源码/H5聊天软件/视频通话语音通话/带文字部署教程 【源码说明】 测试环境&#xff1a;Linux系统CentOS7.6、宝塔、PHP7.2、MySQL5.6&#xff0c;根目录public&#xff0c;伪静态laravel5&#xff0c;根据情况开启SSL 登录后台看到很熟悉。。原来是…

el-table-column 表格列自适应宽度的组件封装说明

针对组件业务上的需求&#xff0c;需要给 el-table-column 加上限制&#xff0c;需保证表头在一行展示&#xff0c;部分列的内容要一行展示&#xff0c;自适应单项列的宽度&#xff1b; 1、先计算数据渲染后的 el-table-column 文本宽度&#xff1b; 因列表的有些数据需要做到…

如此建立网络根文件系统 Mount NFS RootFS

安静NFS系统服务 sudo apt-get install nfs-kernel-server 创建目录 sudo mkdir /rootfsLee 将buildroot编译的根文件系统解压缩到 sudo tar xvf rootfs.tar -C /rootfsLee/ 添加文件NFS访问路径 sudo vi /etc/exports sudo /etc/exports文件&#xff0c;添加如下一行 …

网站推荐——文本对比工具

在线文字对比工具-BeJSON.com 文本对比/字符串差异比较 - 在线工具 在线文本对比-文本内容差异比较-校对专用

企业智能名片小程序:AI智能跟进功能助力精准营销新篇章

在数字化浪潮的推动下&#xff0c;企业营销手段不断迭代升级。如今&#xff0c;一款集手机号授权自动获取、智能提醒、访客AI智能跟进及客户画像与行为记录于一体的企业智能名片小程序&#xff0c;正以其强大的AI智能跟进功能&#xff0c;助力企业开启精准营销的新篇章。 通过深…

图像处理到神经网络:线性代数的跨领域应用探索

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打怪升级之旅 python数据分析…

Swift 中的 Range 运算符

在 Swift 中&#xff0c;Range 运算符是一种强大的工具&#xff0c;用于表示一系列连续的数值或字符。Range 可以用于循环、数组切片、条件语句等场景&#xff0c;为我们提供了方便的方法来处理数据集合。 闭区间运算符 a...b 闭区间运算符 a...b 用于创建一个从起始值到结束…