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

目录

有哪些方法可以发送请求

以前可能了解过:

  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):

相关推荐
IMPYLH1 小时前
HTML 的 <data> 元素
前端·html
YHHLAI1 小时前
[特殊字符] 面试中的 Promise —— 从入门到精通
前端·javascript·面试
weixin_BYSJ19872 小时前
SpringBoot + MySQL 乒乓球运动员信息管理系统项目实战--附源码04954
java·javascript·spring boot·python·django·flask·php
沪飘大军3 小时前
ll-llm:一个零依赖、可插拔的 OpenAI 兼容 LLM 代理
javascript
leoZ2313 小时前
Claude 驱动的全栈开发:Spring Boot + Vue 的 BS 架构实践
vue.js·spring boot·架构
kyriewen3 小时前
我扒了 GPT-5.6 的全部编程跑分——有一项 OpenAI 没敢放出来
前端·gpt·ai编程
前端H4 小时前
微前端 v3 架构升级:从加载隔离到状态协同
前端·架构·状态模式
山河木马4 小时前
GPU自动处理专题3-NDC怎么映射成屏幕像素坐标(视口变换)
javascript·webgl·图形学
陆枫Larry5 小时前
小程序包体积优化:用 SVG 图片替换 iconfont,并保留 CSS 控色能力
前端
Appthing5 小时前
在 TanStack Start 中使用 VitePWA 的正确配置
javascript