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

news2024/11/19 11:24:19

目录

  • 有哪些方法可以发送请求
  • 要请求先解决跨域问题
    • 代理服务器
    • 后端解决跨域问题
  • 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.coloradmin.cn/o/1629437.html

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

相关文章

27.统一网关Gateway-路由断言工厂

在配置文件中写的断言规则只是字符串,这些字符串会被Predicate Factory读取并处理,转变为路由判断的条件。 例如:Path /user/** 是按照路劲匹配,这个规则是由 org.springframework.cloud.gateway.handler.predicate.PathRouteP…

数据库锁介绍

数据库锁是一种同步机制,用于控制多个事务对共享资源的访问,防止并发操作造成的数据不一致。在数据库中,锁通常分为两种基本类型:排他锁(Exclusive Locks)和共享锁(Shared Locks)。排…

PotatoPie 4.0 实验教程(22) —— FPGA实现摄像头图像对数(log)变换

什么是图像的log变换? 总的来说,对数变换是一种常用的图像增强技术,可以改善图像的视觉质量、减少噪声以及突出图像中的细节,从而提高图像在视觉感知和分析中的效果和可用性。 图像的对数变换(log transformation&am…

xLua详解

目录 环境准备xLua导入 C#调用LuaLua解析器Lua文件加载重定向Lua解析管理器全局变量的获取全局函数的获取List和Dictionary映射table类映射table接口映射tableLuaTable映射table Lua调用C#准备工作Lua使用C#类Lua调用C#枚举Lua使用C# 数组 List 字典数组List字典 Lua使用C#扩展…

锂电池SOH预测 | 基于CNN-GRU的锂电池SOH预测(matlab)

锂电池SOH预测 锂电池SOH预测完整代码锂电池SOH预测 锂电池的SOH(状态健康度)预测是一项重要的任务,它可以帮助确定电池的健康状况和剩余寿命,从而优化电池的使用和维护策略。 SOH预测可以通过多种方法实现,其中一些常用的方法包括: 容量衰减法:通过监测电池的容量衰减…

图像处理ASIC设计方法 笔记19 连通域标记ASIC系统设计

目录 核心的模块有:标记ASIC的工作流程如下:该芯片的系统结构具有如下特点:P131 第6章 连通域标记与轮廓跟踪 本章节讲述了多值分割图像连通域标记芯片的系统设计 多值分割图像连通域标记芯片(以下简称"标记芯片",也称"标记 ASIC"),完成图像连通域标…

PotatoPie 4.0 实验教程(27) —— FPGA实现摄像头图像拉普拉斯边缘提取

拉普拉斯边缘提取有什么作用? 拉普拉斯边缘检测是一种常用的图像处理技术,用于检测图像中的边缘和边界。它的主要作用包括: 边缘检测:拉普拉斯算子可以帮助检测图像中的边缘,即图像中亮度快速变化的位置。这些边缘通常…

MAC有没有免费NTFS tuxera激活码 tuxera破解 tuxera for mac2023序列号直装版 ntfs formac教程

Tuxera NTFS 2023破解版是一款非常好用的在线磁盘读写工具,该软件允许mac用户在Windows NTFS格式的硬盘上进行读写操作,Mac的文件系统是HFS,而Windows则使用NTFS格式,这导致在Mac系统上不能直接读写Windows格式的硬盘。然而&#…

什么ISP是住宅IP,和普通IP有什么区别?

ISP(Internet Service Provider)即互联网服务提供商,是向广大用户综合提供互联网接入业务、信息业务和增值业务的电信运营商。住宅IP,也称为家庭IP,是指由ISP分配给家庭或个人用户的IP地址。这些IP地址是真实的&#x…

【深度学习】Yolov8使用心得

兜兜转转,原本以为和yolov没啥关系了,但是新公司又回到了yolov侧。 yolov8 可以用pip的方式安装,以package的三方软件包形式,隐藏了很多细节。当然你也可以从git上把全套代码down下来。 1.分类模型 1.1 改错误 位置&#xff1a…

jenkins教程

jenkins 一、简介二、下载安装三、配置jdk、maven和SSH四、部署微服务 一、简介 Jenkins是一个流行的开源自动化服务器,用于自动化软件开发过程中的构建、测试和部署任务。它提供了一个可扩展的插件生态系统,支持各种编程语言和工具。 Jenkins是一款开…

boot https ssl 使用http协议访问报错

在springboot中配置ssl以后, 再次使用http访问对应的接口就会报错 可以考虑如下设置,将http访问的端口重定向到https对应的端口 import org.apache.catalina.Context; import org.apache.catalina.connector.Connector; import org.apache.tomcat.util…

分段函数拟合-施加分段点连续约束条件|【Matlab源码+视频介绍】

专栏导读 作者简介:工学博士,高级工程师,专注于工业软件算法研究本文已收录于专栏:《复杂函数拟合案例分享》本专栏旨在提供 1.以案例的形式讲解各类复杂函数拟合的程序实现方法,并提供所有案例完整源码;2.…

CISSP通关学习笔记:共计 9 个章节(已完结)

1. 笔记说明 第 0 章节为开篇介绍,不包括知识点。第 1 - 8 章节为知识点梳理汇总,8 个章节的知识框架关系如下图所示: 2. 笔记目录 「 CISSP学习笔记 」0.开篇「 CISSP学习笔记 」1.安全与风险管理「 CISSP学习笔记 」2.资产安全「 CISSP…

MIPS32 指令架构

指令格式 R 类型 说明: 用于寄存器和寄存器操作 参数说明: Op: 指令操作码Rs: 第一个源操作数寄存器号,参与运算使用Rd: 目的操作数寄存器号,保存结果使用Shamt: 位偏移量,仅在位移指令使用,在此直接置0Func: 指令函…

MF(推荐系统的矩阵分解技术)论文笔记

论文概述 推荐系统的矩阵分解技术可以为用户提供更为准确的个性化推荐,对比传统的近邻技术,矩阵分解技术可以纳入更多信息,如隐式反馈、时间效应和置信度 近邻技术:基于用户或物品之间的相似性进行推荐,当用户之间已…

【java数据结构之八大排序(上)-直接插入排序,希尔排序,选择排序,堆排序,向下调整(大根堆,小根堆)等知识详解】

🌈个人主页:努力学编程’ ⛅个人推荐:基于java提供的ArrayList实现的扑克牌游戏 |C贪吃蛇详解 ⚡学好数据结构,刷题刻不容缓:点击一起刷题 🌙心灵鸡汤:总有人要赢,为什么不能是我呢 …

RabbitMQ知识点总结(一)

为什么要使用RabbitMQ? 异步,解耦,削峰。 异步 提高效率;一个挂了,另外的服务不受影响。 解耦 增加或减少服务比较方便。 削峰 每天0点到16点,A系统风平浪静,每秒并发数量就100个。结果每次到了16点到…

[笔试强训]day3

1.简写单词 题目链接&#xff1a;简写单词_牛客题霸_牛客网 思路&#xff1a;利用scanf读取特性&#xff0c;因为scanf是以空格&#xff0c;换行或者文件末尾为结束标志。 代码&#xff1a; #include <iostream> using namespace std;int main() {char str[100] {0}…

使用Python进行自动化部署

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 使用Python进行自动化部署 在软件开发和运维领域&#xff0c;自动化部署是一个至关重要的环…