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

相关推荐
Gavin在路上4 分钟前
DDD之用事件风暴重构“电商订单履约”(11)
java·前端·重构
我命由我1234510 分钟前
VSCode - VSCode 颜色值快速转换
前端·ide·vscode·前端框架·编辑器·html·js
qq_124987075323 分钟前
基于SpringBoot+vue的小黄蜂外卖平台(源码+论文+部署+安装)
java·开发语言·vue.js·spring boot·后端·mysql·毕业设计
前端涂涂24 分钟前
怎么设计一个加密货币 谁有权利发行数字货币 怎么防止double spending attack 怎么验证交易合法性 铸币交易..
前端
JuneTT24 分钟前
【JS】使用内连配置强制引入图片为base64
前端·javascript
前端涂涂30 分钟前
4.BTC-协议
前端
老前端的功夫35 分钟前
移动端兼容性深度解析:从像素到交互的全方位解决方案
前端·前端框架·node.js·交互·css3
代码与野兽37 分钟前
AI交易,怎么让LLM自己挑选数据源?
前端·javascript·后端
CC码码1 小时前
前端文本分割工具,“他”来了
前端·javascript·程序员
星火飞码iFlyCode1 小时前
MySQL数据库操作一致性保证(智能对话+AI代码补全案例)【留言有奖】
javascript