Vue跨域问题、Vue配置开发环境代理服务、集成Axios发送Ajax请求、集成vue-resource发送Ajax请求

本文主要是介绍Vue跨域问题、Vue配置开发环境代理服务、集成Axios发送Ajax请求、集成vue-resource发送Ajax请求,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 1. Ajax请求服务介绍
  • 2. axios的安装
  • 3. Vue跨域问题介绍和解决方案
  • 4. 使用vue-cli配置开发环境代理服务
    • 4.1 简单配置
    • 4.2 复杂配置
    • 4.3 二次封装
  • 5. 集成vue-resource发送Ajax请求

1. Ajax请求服务介绍

  1. xhr: new XHLHttpRequest().open()/send()。偏向底层
  2. JQuery: 对xhr进行了封装。提供$get、$post等API。封装了太多DOM操作,不适合Vue
  3. axios: 基于promise的网络请求库,支持请求拦截器和响应拦截器,体积小,只有JQuery的1/4
  4. fetch: Window.prototype上直接有这个方法,也是基于promise的。但是会将返回的请求包两层promise,需要两次.then才能拿到请求,IE浏览器兼容性差

2. axios的安装

使用命令cnpm install axios安装项目包

3. Vue跨域问题介绍和解决方案

  • Vue使用Axios请求不同端口的服务,会出现类似下面的错误。即CORS跨域问题
Access to XMLHttpRequest at 'http://localhost:5000/students' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  • 只要【协议名】【IP】【端口】不同的服务请求就会出现跨域问题
  • 出现跨域问题,服务器能接收到请求,浏览器也能接收到数据,但是浏览器发现存在跨域问题,就对数据进行拦截,Axios出现error报错
  • 解决跨域问题的方法
    1. 服务器可以给Header中配置Access-Control-Allow-Origin,这样浏览器就不会进行数据的拦截,但是安全性不高
    2. jsonp解决跨域问题,借助script标签的src属性,在引入外部资源的时候,不受同源策略限制,需要前后端配置,而且只能解决get请求跨域问题,所以用的少
    3. 配置代理服务器。代理服务器和运行的Vue服务在同一台服务器,而且端口是一样的。虽然代理服务器和返回数据的服务器端口不一样,但是他们之间通信不用前端的Ajax,即不存在跨域问题。代理服务器种类
      1. Nginx
      2. vue-cli

4. 使用vue-cli配置开发环境代理服务

4.1 简单配置

在vue.config.js配置。这种方式只能配置一个接收请求的服务器

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({devServer: {// 接收请求的服务器IP和端口proxy: 'http://localhost:5000'}
})

App.vue:Axios发送请求示例如下:

  • axios发送的请求,是代理服务器的IP和端口
  • 如果发送请求的资源在public目录下存在,如http://localhost:8080/favicon.ico,则不会向服务器发出请求
<template><div><button @click="getStudents">获取学生信息</button></div>
</template><script>import axios from 'axios'export default {name:'App',methods: {getStudents(){// 代理服务器的IP和端口axios.get('http://localhost:8080/students').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)})}}}
</script>

4.2 复杂配置

  • 可以配置多个接收请求的服务器。可以配置请求URL访问路径前缀
  • 如果使用vite构建的项目,可以参考vite服务器选项server-proxy

在vue.config.js配置:axios请求的路径是http://localhost:8080/api1/students,最终代理服务器发送的请求url是http://localhost:5000/students

  devServer: {proxy: {// 请求的URL符合前缀才走代理'/api1': {target: 'http://localhost:5000',// 匹配以/api1开头的路径,然后将/api1替换成''pathRewrite:{'^/api1':''},ws: true,    // 用于支持websocketchangeOrigin: true    // 默认是true, 代理服务器告诉请求的服务器,我的端口和你一样是5000。如果是false,则告诉请求的服务器我是代理服务器,我的端口是8080},'/api2': {target: 'http://localhost:5001',pathRewrite:{'^/api2':''},ws: true,changeOrigin: true}}}

App.vue

<template><div><button @click="getStudents">获取学生信息</button><button @click="getCars">获取汽车信息</button></div>
</template><script>import axios from 'axios'export default {name:'App',methods: {getStudents(){axios.get('http://localhost:8080/api1/students').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)})},getCars(){axios.get('http://localhost:8080/api2/cars').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)})}}}
</script>

4.3 二次封装

  • 目的:

    1. 利用axios请求拦截器功能(一般可以在headers中携带公共的参数,如token)
    2. 利用axios响应拦截器功能(可以简化服务器返回的数据, 和处理http网络错误)
  • 二次封装代码如下:

import axios from 'axios'
import {ElMessage} from 'element-plus'// 创建一个axios实例, 可以设置基础路径、超时时间
const request = axios.create({baseURL: '/api',timeout: 5000
})// 请求拦截器
request.interceptors.request.use((config) => {config.headers.token = 123456return config
})// 响应拦截器
request.interceptors.response.use((response) => {return response.data
}, (error) => {// 处理http网络错误let status = error.response.statusswitch (status) {case 400 | 404:// 错误提示信息ElMessage({type: 'error',message: error.response.message})breakdefault:ElMessage({type: 'error',message: '请求出错了'})}return Promise.reject(new Error(error.message))
})export default request

二次封装的request的使用如下:

import request from "request"request.get('/user').then(res => {console.log(res)
})

5. 集成vue-resource发送Ajax请求

vue-resource也是基于promise的。使用命令cnpm install vue-resource安装vue-resource的项目包

使用示例
App.vue:直接调用VueComponent.$http发送请求

<template><div><button @click="getGithubUsers">获取Github的用户信息</button></div>
</template><script>
export default {name:'App',data() {return {uname:'test'}},methods: {getGithubUsers(){// github服务器给我们解决了跨域问题this.$http.get(`https://api.github.com/search/users?q=${this.uname}`).then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)})}}
}
</script>

main.js:使用vueResourceEsm插件

import Vue from 'vue'
import App from './App.vue'
import vueResourceEsm from "vue-resource";
Vue.config.productionTip = false// 使用插件
Vue.use(vueResourceEsm)new Vue({el:'#app',render: h => h(App)
})

这篇关于Vue跨域问题、Vue配置开发环境代理服务、集成Axios发送Ajax请求、集成vue-resource发送Ajax请求的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1141781

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式。 ■ 单机模式:Zookeeper只运行在一台服务器上,适合测试环境; ■ 伪集群模式:就是在一台物理机上运行多个Zookeeper 实例; ■ 集群模式:Zookeeper运行于一个集群上,适合生产环境,这个计算机集群被称为一个“集合体”(ensemble) Zookeeper通过复制来实现

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

hadoop开启回收站配置

开启回收站功能,可以将删除的文件在不超时的情况下,恢复原数据,起到防止误删除、备份等作用。 开启回收站功能参数说明 (1)默认值fs.trash.interval = 0,0表示禁用回收站;其他值表示设置文件的存活时间。 (2)默认值fs.trash.checkpoint.interval = 0,检查回收站的间隔时间。如果该值为0,则该值设置和fs.trash.interval的参数值相等。

NameNode内存生产配置

Hadoop2.x 系列,配置 NameNode 内存 NameNode 内存默认 2000m ,如果服务器内存 4G , NameNode 内存可以配置 3g 。在 hadoop-env.sh 文件中配置如下。 HADOOP_NAMENODE_OPTS=-Xmx3072m Hadoop3.x 系列,配置 Nam

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下