在uniapp中如何安装axios并解决跨域问题

目录

1、安装axios

2、导入 

3、使用(发请求)

2.解决跨域问题 

1.为什么要解决跨域问题?

2.前端如何解决跨域问题?


1、安装axios

npm install axios

2、导入 

在main.js中导入使用

import axios from 'axios';
// 创建一个名为 $axios 的全局变量
Vue.prototype.$axios = axios

3、使用(发请求)

<template><view class="container"><view class="form"><view class="form-item"><text class="label">用户名:</text><input type="text" v-model="userId" class="input" placeholder="请输入用户名"></view><view class="form-item"><text class="label">密码:</text><input type="password" v-model="password" class="input" placeholder="请输入密码"></view><view class="form-item"><button @click="login" class="button">登录</button></view><view v-if="error" class="error">{{ error }}</view></view></view>
</template><script>
export default {data() {return {userId: '',password: '',error: ''};},methods: {login() {// 发送登录请求this.$axios({method: "post",url: "http://localhost:8080/api/user/login",data: {userId: this.userId,password: this.password,},}).then((res) => {console.log(res);if (res.data.code == "200") {// 登录成功,显示成功提示信息this.$message({message: res.data.message,type: "success",});// 跳转到后台主页 (编程式导航)this.$router.push("/pages/index/index");}});}}
}
</script>

2.解决跨域问题 

如下图显示就是跨域问题

1.为什么要解决跨域问题?

 跨域(Cross-Origin)是指在浏览器中,当前网页的协议、域名或端口与请求目标的协议、域名或端口不相同,即存在跨域请求的情况。

2.前端如何解决跨域问题?

在项目根目录下创建vue.config.js文件并增加以下内容:

module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:9090',changeOrigin: true,pathRewrite: {'^/api': ''}}}}
};

 

这段代码是一个 webpack 配置文件,通常用于 Vue.js 项目。它的作用是配置开发服务器的代理,用于将请求转发到指定的目标服务器。

具体解释如下:

  • module.exports: 这是 Node.js 中用于导出模块的语法,表明这是一个模块的导出。

  • devServer: 这是 webpack-dev-server 的配置项,用于配置开发服务器。

  • proxy: 这是开发服务器的代理配置,用于将某些请求代理到另一个服务器。

  • '/api': 表示需要被代理的路径前缀。即,当请求路径以 '/api' 开头时,将会被代理。

  • target: 'http://localhost:9090': 这是代理的目标服务器地址,即请求将被转发到这个地址。

  • changeOrigin: true: 这是一个布尔值,表示是否改变请求头中的 origin 字段为目标 URL,通常在跨域请求时设置为 true。

  • pathRewrite: {'^/api': ''}: 这是一个对象,用于重写路径。它的作用是将请求路径中的 '/api' 替换为空字符串,即将 '/api' 去掉,这样最终发送到目标服务器的请求路径就不包含 '/api' 了。

综上所述,这段代码的作用是将以 '/api' 开头的请求代理到目标服务器 http://localhost:9090,同时将请求路径中的 '/api' 去掉。

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

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

相关文章

智慧互联,统信UOS V20桌面专业版(1070)解锁办公新模式丨年度更新

从小屏到大屏 突破&#xff0c;就在方寸之间 从人机到智脑 融合&#xff0c;旨在新质生产力 统信UOS一直致力于将先进科技与用户场景相结合&#xff0c;不断提升用户的工作效率和生产力。在最新发布的统信UOS V20桌面专业版&#xff08;1070&#xff09;版本中&#xff0c;我们…

Rust 解决循环引用

导航 循环引用一、现象二、解决 循环引用 循环引用出现的一个场景就是你指向我&#xff0c;我指向你&#xff0c;导致程序崩溃 解决方式可以通过弱指针&#xff0c;而Rust中的弱指针就是Weak 在Rc中&#xff0c;可以实现&#xff0c;对一个变量&#xff0c;持有多个不可变引…

【一支射频电缆的诞生】GORE 戈尔

工具连接&#xff1a; https://microwave-cablebuilder.gore.com/ 控制参数&#xff1a; 连接器&#xff1a; 欣赏

Android APP读写外置SD卡无权限 java.io.IOException: Permission denied

在物联网应用里&#xff0c;app需要对挂载SD卡读写文件&#xff0c;从 Android 4.4&#xff08;KitKat&#xff09;版本开始&#xff0c;Google 引入了一项名为 "Storage Access Framework" 的新功能&#xff0c;该功能限制了应用对外部存储的直接读写权限,要不然就是…

【挑战30天首通《谷粒商城》】-【第一天】03、简介-分布式基础概念

文章目录 课程介绍 ( 本章了解即可&#xff0c;可以略过)1、微服务简而言之: 2、集群&分布式&节点2.1、定义2.2、示例 3、远程调用4、负载均衡常见的负裁均衡算法: 5、服务注册/发现&注册中心6、配置中心7、服务熔断&服务降级7.1、服务熔断7.2、服务降级 8、AP…

Appium测试之获取appPackage和appActivity

appPackage和appActivity 进行appium自动化测试非常重要的两个参数&#xff0c;我们所测试的APP不同&#xff0c;这两个参数肯定也是不一样的。那如何快速的获取这APP的这两个参数呢&#xff1f;我这里介绍两个方法。 import org.openqa.selenium.remote.DesiredCapabilities;i…

从零开始学AI绘画,万字Stable Diffusion终极教程(六)

【第6期】知识补充 欢迎来到SD的终极教程&#xff0c;这是我们的第六节课&#xff0c;也是最后一节课 这套课程分为六节课&#xff0c;会系统性的介绍sd的全部功能&#xff0c;让你打下坚实牢靠的基础 1.SD入门 2.关键词 3.Lora模型 4.图生图 5.controlnet 6.知识补充 …

利用生成式AI重新构想ITSM的未来

对注入 AI 的生成式 ITSM 的需求&#xff0c;在 2023 年 Gartner AI 炒作周期中&#xff0c;生成式 AI 达到预期值达到顶峰后&#xff0c;三分之二的企业已经将生成式 AI 集成到其流程中。 你问为什么这种追求&#xff1f;在预定义算法的驱动下&#xff0c;IT 服务交付和管理中…

PyCharm 集成 Git

目录 1、配置 Git 忽略文件 2、定位Git 3、使用pycharm本地提交 3.1、初始化本地库 3.2、添加到暂存区 3.3、提交到本地库 3.4、切换版本 4、分支操作 4.1、创建分支 4.2、切换分支 4.3、合并分支 5、解决冲突 1、配置 Git 忽略文件 作用&#xff1a;与项目的实际…

【redis】Redis五种常用数据类型和内部编码,以及对String字符串类型的总结

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

51单片机入门:蜂鸣器

蜂鸣器介绍 蜂鸣器是一种将电信号转换为声音信号的器件&#xff0c;常用来产生设备的按键音、报警音等提示信号。 蜂鸣器的种类 1、从结构上&#xff1a;压电式蜂鸣器和电磁式蜂鸣器。 压电式蜂鸣器&#xff1a;通过压电陶瓷的压电效应原理工作的。当加有交变电压时&#xf…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-14-主频和时钟配置

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

轮式机器人简介

迄今为止,轮子一般是移动机器人学和人造交通车辆中最流行的运动机构。它可达到很高的效率, 如图所示, 而且用比较简单的机械就可实现它的制作。 另外,在轮式机器人设计中,平衡通常不是一个研究问题。 因为在所有时间里,轮式机器人一般都被设计成在任何时间里所有轮子均与地接…

idea上如何新建git分支

当前项目在dev分支&#xff0c;如果想在新分支上开发代码&#xff0c;如何新建一个分支呢&#xff1f;5秒搞定~ 1、工具类选择git&#xff0c;点击New Branch 或者右下角点击git分支&#xff0c;再点击New Branch 2、在弹出的Create New Branch弹窗中&#xff0c;输入你的新分支…

VMware 不能拍摄快照

问题&#xff1a; 拍摄快照后&#xff0c;会出现这个弹窗&#xff0c;然后虚拟机就直接自动退出了&#xff0c;还会弹出一个框&#xff1a; 解决方法&#xff1a; 我用的是 window11 和 VMware16.0.0 这是因为VM16与window11&#xff0c;二者之间版本不兼容问题&#xff0c;可…

Python 全栈系列243 S2S flask_celery

说明 按现有的几个架构部件&#xff0c;构建数据流。 S Redis Stream。这个可以作为缓冲队列和简单任务队列&#xff0c;速度非常快&#xff0c;至少是万条/秒的速度。 Q RabbitMQ。这个作为任务队列&#xff0c;消息也主要是元数据。读速比较慢&#xff0c;但有一些特性&a…

Linux(openEuler、CentOS8)常用的IP修改方式(文本配置工具nmtui+配置文件+nmcli命令)

----本实验环境为openEuler系统<以server方式安装>&#xff08;CentOS类似&#xff0c;可参考本文&#xff09;---- 一、知识点 &#xff08;一&#xff09;文本配置工具nmtui(openEuler已预装) nmtui&#xff08;NetworkManager Text User Interface&#xff09;是一…

【LeetCode算法】389. 找不同

提示&#xff1a;此文章仅作为本人记录日常学习使用&#xff0c;若有存在错误或者不严谨得地方欢迎指正。 文章目录 一、题目二、思路三、解决方案 一、题目 给定两个字符串 s 和 t &#xff0c;它们只包含小写字母。字符串 t 由字符串 s 随机重排&#xff0c;然后在随机位置添…

Linux第三节--常见的指令介绍集合(持续更新中)

点赞关注不迷路&#xff01;&#xff0c;本节涉及初识Linux第三节&#xff0c;主要为常见的几条指令介绍。 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1f44d;&#x1f3fb; 收藏 ✨ 加关注&#x1f440; 期待与你共同进步! Linux下基本指令 1. man指令 Linu…

【网络原理】HTTPS | 对称加密 | 非对称加密 | 中间人攻击 | 证书 | 公钥 | 私钥

文章目录 HTTPSHTTPS的工作过程1.对称加密&#xff0c;加密业务数据2.非对称加密&#xff0c;加密对称密钥中间人攻击 3.使用证书&#xff0c;校验服务器的公钥 HTTPS 在http的基础上引入了一个加密层 1.对称加密&#xff0c;加密和解谜使用同一个密钥 2.非对称加密。有两个…