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):
在这里插入图片描述

相关推荐

  1. React或Vue通讯的问题处理

    2024-04-28 06:58:04       45 阅读
  2. 解决前端问题,解决方法

    2024-04-28 06:58:04       67 阅读
  3. 使用response.reset()导致出现问题

    2024-04-28 06:58:04       54 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-28 06:58:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-28 06:58:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-28 06:58:04       82 阅读
  4. Python语言-面向对象

    2024-04-28 06:58:04       91 阅读

热门阅读

  1. Web前后端交互

    2024-04-28 06:58:04       25 阅读
  2. K8s初次入门

    2024-04-28 06:58:04       27 阅读
  3. android layout 的文件夹可以创建子文件夹吗

    2024-04-28 06:58:04       27 阅读
  4. Android 生成二维码

    2024-04-28 06:58:04       26 阅读
  5. 基于单片机的配电网故障自适应监控系统设计

    2024-04-28 06:58:04       32 阅读
  6. Redis面试题超详细(2024最新)

    2024-04-28 06:58:04       37 阅读
  7. Ubuntu22.04安装Nvidia 550驱动和CUDA toolkit 12.4.1

    2024-04-28 06:58:04       36 阅读
  8. 练习题(2024/4/27)

    2024-04-28 06:58:04       31 阅读
  9. iptables动作

    2024-04-28 06:58:04       103 阅读
  10. 【Kotlin】select简介

    2024-04-28 06:58:04       35 阅读