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.mfbz.cn/a/577937.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode 剑指 Offer II 075.数组的相对排序

题目难度: 简单 原题链接 今天继续更新 Leetcode 的剑指 Offer(专项突击版)系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 给定两个数组,arr1 和 arr2, arr2 中的元…

Java NIO

1. IO分类概述 1.1 阻塞与非阻塞 阻塞(Blocking)和非阻塞(Nonblocking)是在计算机编程中用于描述I/O操作的两个重要概念。阻塞与非阻塞描述的是线程在访问某个资源时,在该资源没有准备就绪期间的处理方式。 1、阻塞&a…

Android使用AlertDialog实现弹出菜单

最近又开始捣鼓APP,许多api , class都忘记怎么用了,楼下使用AlertDialog实现个弹出菜单,结果直接crash,查了半天,终于即将,记录一下…… 1 实现代码 AlertDialog.Builder mBuilder new AlertDialog.Builde…

后端工程师——C++工程师如何准备面试?

相比 Java 语言方向,C++ 入门简单,精通难,找工作竞争压力更小,但 C++ 依然是近年来招聘的热门岗位之一。本文将从以下三个方面进行详细讲解,帮助你对 C++ 相关岗位的就业前景、岗位要求、学习路线等有更充分的了解。 C++工程师面试准备 上两篇文章对 C++ 工程师的招聘需求…

SpringCloud系列(17)--将服务消费者Consumer注册进Zookeeper

前言:在上一章节中我们把服务提供者Provider注册进了Zookeeper,而本章节则是关于如何将服务消费者Consumer注册进Zookeeper 1、再次创建一个服务提供者模块,命名为consumerzk-order80 (1)在父工程下新建模块 (2)选择模块的项目类型为Maven并…

HPE Aruba Networking推出新一代Wi-Fi 7接入点 助力企业高效应对安全、AI与物联网挑战

HPE ArubaNetworking推出的全新Wi-Fi 7接入点,提供全面的AI就绪边缘IT解决方案,旨在为用户和物联网设备提供安全、高性能的连接服务,以实现数据的捕获和路由,从而满足AI训练和推理需求 休斯顿-2024年4月23日-慧与科技(NYSE: HPE)近…

【golang学习之旅】深入理解字符串string数据类型

系列文章 【golang学习之旅】报错:a declared but not used 【golang学习之旅】Go 的基本数据类型 目录 系列文章使用示例string的底层数据结构关于字符串复制字符串是不可变的如何高效的进行字符串拼接? 使用示例 Go 语言中的字符串只是一个只读的字节…

Spring boot + Redis + Spring Cache 实现缓存

学习 Redis 的 value 有 5 种常用的数据结构 Redis 存储的是 key-value 结构的数据。key 是字符串类型,value 有 5 种常用的数据结构: Redis 的图形化工具 Another Redis Desktop Manager Spring Data Redis Redis 的 Java 客户端。 Spring Cache Spr…

AI工具集:解锁智能新境界,一站式解决你的所有需求!

在这个信息爆炸的时代,我们每天都在与大量的数据和信息打交道。如何高效地处理这些信息,提高工作效率和生活品质,成为了我们亟待解决的问题。而AI工具集(AI-321.com)的出现,无疑为我们提供了一把解锁智能新境界的钥匙。 AI-321 | …

VirtualBox7.0.16的蓝屏大坑与ssh登陆ubuntu虚拟机的办法

背景: 安装了最新版的VirtualBox,装了ubuntu系统,在win10下通过ssh死活无法与ubuntu进行正常登陆控制。 然后开始了踩坑。 问题1:ssh登陆失败,但是主机能ping通ubuntu,反过来也能ping通,网络…

地学研究相关工具推荐0426

地学研究相关工具推荐0426 文章目录 地学研究相关工具推荐0426前言工具PanoplyFileZillaGetData Graph DigitizerZotero**谷谷GIS地图下载器** 总结 前言 以下这些工具是之前在进行一些研究过程中使用过的工具,在之后的研究中可能会用到,推荐给大家&…

Unity类银河恶魔城学习记录14-5 p152 Lost currency save and enemy‘s currency drop

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释,可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili LostCurrencyController.cs using System.Collections; using System.Colle…

每天五分钟深度学习:如何理解梯度下降算法可以逼近全局最小值?

本文重点 上节课程中,我们已经知道了逻辑回归的代价函数J。要想最小化代价函数,我们需要使用梯度下降算法。 梯度下降算法地直观理解: 为了可视化,我们假设w和b都是单一实数,实际上,w可以是更高地维度。 代价函数J是在水平轴w和b上的曲面,因此曲面的高度就是J(w,b)在…

井字棋游戏

1. 游戏创建 1.1导包 from tkinter import * import numpy as np import math import tkinter.messagebox 1.2 窗口内容 1.2.1创建一个窗口 root Tk() # 窗口名称 root.title("井字棋 from Sun") 1.2.2 创建一个框架,将其放置在窗口中 Frame1 F…

如何进行域名解析?如何清理DNS缓存?(附源码)

目录 1、什么是域名? 2、为什么使用域名? 3、域名解析的完整流程 4、调用gethostbyname系统接口将域名解析成IP地址 5、为什么需要清理系统DNS缓存? 6、使用cmd命令清理DNS缓存 7、通过代码去清除系统DNS缓存 C软件异常排查从入门到精…

图像分类导论:从模型设计到端到端

书籍:An Introduction to Image Classification:From Designed Models to End-to-End Learning 作者:Klaus D. Toennies 出版:Springer Singapore 书籍下载-《图像分类导论》图像分类的传统方法包括在特征空间中进行特征提取和…

怎么提高职场辩论的口才能力的方法

提高职场辩论的口才能力是一个综合而复杂的过程,涉及知识积累、技巧学习、实践锻炼等多个方面。以下是关于如何提高职场辩论口才能力的详细分析和建议。 一、引言 在职场中,良好的口才能力对于个人职业发展具有重要意义。优秀的口才不仅能够提升个人的…

日志分析简单总结

1、分析日志的目的 误报:不是攻击而上报成攻击 漏报:是攻击而没有防御的情况 日志分析可以判断是否误判或者漏判,可以溯源攻击行为 在护网作为防守方必备的技能(分析NGAF和态势感知,发现异常) 2、攻击出现…

C++进阶--智能指针

智能指针的概念 智能指针是C中的一个重要概念,用于管理动态分配的对象内存。它是一个类模板,通过封装原始指针,并在对象生命周期结束时自动释放内存,从而避免了内存泄漏和资源管理的繁琐工作。 C标准库提供了多种常见的智能指针…

el-date-picker 禁用时分秒选择(包括禁用下拉框展示)

2024.04.26今天我学习了对el-date-picker进行禁用时分秒, 在使用el-date-picker组件的时候,我们有可能遇到需要把时分秒的时间固定,然后并且不能让他修改: 1714120999296 比如右上角的这个时间,我们要给它固定是‘08:…