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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/53569.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sklearn的datasets模块与自带数据集介绍

datasets 模块 用 dir() 函数查看 datasets 模块的所有属性和函数 import sklearn.datasets as datasets# 列出 sklearn.datasets 模块中的所有属性和函数 print(dir(datasets)) datasets 模块下的数据集有三种类型&#xff1a; &#xff08;1&#xff09;load系列的经典数…

Sqoop 数据迁移

Sqoop 数据迁移 一、Sqoop 概述二、Sqoop 优势三、Sqoop 的架构与工作机制四、Sqoop Import 流程五、Sqoop Export 流程六、Sqoop 安装部署6.1 下载解压6.2 修改 Sqoop 配置文件6.3 配置 Sqoop 环境变量6.4 添加 MySQL 驱动包6.5 测试运行 Sqoop6.5.1 查看Sqoop命令语法6.5.2 测…

Vue 中 计算属性与侦听属性的使用与介绍

Vue 中 计算属性与侦听属性的使用与介绍 计算属性 - computed 计算属性是一种特殊的属性&#xff0c;它依赖于其他属性&#xff0c;并返回一个新的值。当依赖的属性发生变化时&#xff0c;计算属性会重新求值。 计算属性的语法如下&#xff1a; computed: {// 计算属性名: …

【数学建模】2024数学建模国赛经验分享

文章目录 一、关于我二、我的数模历程三、经验总结&#xff1a; 一、关于我 我的CSDN主页&#xff1a;https://gxdxyl.blog.csdn.net/ 2020年7月&#xff08;大二结束的暑假&#xff09;开始在CSDN写作&#xff1a; 阿里云博客专家&#xff1a; 接触的领域挺多的&#xff…

摩尔投票算法--169. 多数元素

169. 多数元素 普通方法-借助map计数 class Solution { public:int majorityElement(vector<int>& nums) {map<int,int> mp;for(int num :nums){mp[num];}for(auto &a :mp){if(a.second>nums.size()/2){return a.first;}}return 0;} }; 进阶&#xff…

【Linux】常用指令(中)(附带基础指令的详细讲解、Linux的一些附加知识)

文章目录 前言1. Linux基础常用指令1.1 通配符 "*"1.2 man指令&#xff08;重要&#xff09;1.2.1 man指令的语法 1.3 何为"指令"&#xff1f;(附带知识)1.4 echo指令1.5 cat指令1.6 Linux下一切皆文件&#xff01;1.6.1 ">" 输出重定向1.6.2…

【基础知识复习 - 随机练习题】

问题 1&#xff1a;在软件生命周期模型中&#xff0c;哪一个模型强调了开发过程的迭代性和反馈&#xff1f; A. 瀑布模型 B. V模型 C. 敏捷模型 D. 原型模型 答案&#xff1a;C. 敏捷模型 解析&#xff1a;敏捷模型强调迭代开发和反馈&#xff0c;允许在每个迭代周期中进行调…

浅谈C#之线程锁

一、基本介绍 锁是一种同步机制&#xff0c;用于控制多个线程对共享资源的访问。当一个线程获得了锁时&#xff0c;其他线程将被阻塞&#xff0c;直到该线程释放了锁。 在并发编程中&#xff0c;多个线程同时访问共享资源可能导致数据竞争和不确定的行为。锁可以确保在任意时刻…

springboot提升-多数据源配置

文章目录 1. 添加依赖2. 配置数据源示例配置&#xff1a; 3. 创建数据源 Bean4. 创建动态数据源5. 配置 MyBatis SqlSessionFactory6. 在业务代码中使用注意事项 在 Spring Boot 中配置 MyBatis 以支持多数据源涉及几个关键步骤&#xff0c;包括配置数据源、集成 MyBatis 以及动…

Qt篇——Qt使用C++获取Windows电脑上所有外接设备的名称、物理端口位置等信息

我之前有发过一篇文章《Qt篇——获取Windows系统上插入的串口设备的物理序号》&#xff0c;文章中主要获取的是插入的USB串口设备的物理序号&#xff1b;而本篇文章则进行拓展&#xff0c;可以获取所有外接设备的相关信息&#xff08;比如USB摄像头、USB蓝牙、USB网卡、其它一些…

Android 蓝牙三方和动态权限三方

记录一下最近用到的简单的框架 蓝牙 FastBle&#xff1a;Android BLE通信库的介绍与高级用法 - 简书 https://github.com/Jasonchenlijian/FastBle 动态权限: GitHub - googlesamples/easypermissions: Simplify Android M system permissions 位置权限举例,arrayOf中多…

Spring 源码解读:使用FactoryBean创建复杂对象的实现

引言 在Spring框架中&#xff0c;FactoryBean是一个特殊的Bean&#xff0c;它允许开发者通过实现FactoryBean接口来控制Bean的创建过程&#xff0c;特别适用于创建复杂对象。FactoryBean可以将复杂对象的创建逻辑与业务逻辑分离&#xff0c;提供更高的灵活性和可扩展性。在本篇…

分布式技术概览

文章目录 分布式技术1. 分布式数据库&#xff08;Distributed Databases&#xff09;2. 分布式文件系统&#xff08;Distributed File Systems&#xff09;3. 分布式哈希表&#xff08;Distributed Hash Tables, DHTs&#xff09;4. 分布式缓存&#xff08;Distributed Caching…

代码随想录打卡Day28

今天的题目还是感觉有难度&#xff0c;前三道题都想不出来思路&#xff0c;直接看讲解去了。。。贪心的难题真的好难想出来。 122.买卖股票的最佳时机II 这道题用贪心解很巧妙。涉及到一个数学技巧&#xff0c;从第i天买入&#xff0c;第j天卖出&#xff0c;所获得的利润为pr…

面试必问:Java 类加载过程

java 类加载过程主要分为加载、链接和初始化三个阶段&#xff0c;六个关键步骤&#xff1a;加载、验证、准备、解析、初始化。 加载阶段&#xff08;Loading&#xff09; 加载时类加载的第一个过程&#xff0c;在这个阶段&#xff0c;将完成以下三件事情&#xff1a; 1&#…

基于Springboot的鲜花销售网站的设计与实现

项目描述 这是一款基于Springboot的鲜花销售网站的系统 模块描述 鲜花销售系统 1、用户 登录 在线注册 浏览商品 鲜花搜索 订购商品 查询商品详情 水果分类查看 水果加购物车 下单结算 填写收货地址 2、管理员 登录 用户管理 商品管理 订单管理 账户管理 截图

项目经理应该学习pmp还是cspm?

职场竞争激烈&#xff0c;项目管理专业人才在各个行业中的作用越来越凸显出来。在23年之前&#xff0c;我国关于通用项目管理人才的培养更多依赖于国外的PMP认证&#xff0c;缺少自主的认证评价标准和体系。 为了弥补这一空缺&#xff0c;基于国内的项目管理发展需求&#xff…

西门子博途零基础学PLC必会的100个指令

#西门子##PLC##自动化##工业自动化##编程##电工##西门子PLC##工业##制造业##数字化##电气##工程师# 工控人加入PLC工业自动化精英社群 工控人加入PLC工业自动化精英社群

OpenMV——色块追踪

Python知识&#xff1a; 1.给Python的列表赋值&#xff1a; 定义一个元组时就是 元组a (1,2,…) 元组中可以只有一个元素&#xff0c;但是就必须要加一个 “ , ” 如 a (2,) 而列表的定义和元组类似&#xff0c;只是把()换成[]: #那么下面的colour_1 ~ 3属于元组&#xf…

(计算机网络)运输层

一.运输层的作用 运输层&#xff1a;负责将数据统一的交给网络层 实质&#xff1a;进程在通信 TCP&#xff08;有反馈&#xff09;UDP&#xff08;无反馈&#xff09; 二.复用和分用 三. TCP和UDP的特点和区别 进程号--不是固定的 端口号固定--mysql--3306 端口--通信的终点 …