在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题

问题复现

uniapp项目在浏览器运行,有可能调用某些接口会出现跨域问题,报错如下图所示:
在这里插入图片描述

什么是跨域?

存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求。同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦。一般来说,浏览器会根据请求来判断是否同源,判断的方式是通过判断两个URL的协议(http or https)、域名和端口是否相同来进行的。

在uniapp中出现跨域问题如何解决?

1.服务端设置CORS

在后端的响应头设置Access-Control-Allow-Origin属性,允许前端的访问:

Access-Control-Allow-Origin: *

如果条件允许,能给找到接口后端开发者,只需要响应头添加如此设置,前端即可正常访问;

但是后端往往考虑安全问题,API接口只允许自己公司项目使用,如果开启了运行跨域那么所有人都可以来蹭你的接口,导致没必要的消耗或暴露存在的安全漏洞。

或者用了别人的开源接口根本找不到开发者,所以这个方案依赖于别人,能不能解决跨域,那就随缘了。

2.在HBuilder编辑器中使用内置浏览器运行

在这里插入图片描述
如上图所示,uniapp项目使用内置浏览器预览调试,可以轻松解决接口在外部浏览器出现的跨域问题。

这种方案也是最简单方便的解决办法。

3.在vite.config.js中配置代理

这种方案是开发vue项目最普遍的用法,在uniapp项目中依然适用,也是我重点给推荐的方式。

vue3是适用vite构建及打包的,所以在uniapp项目根目录下创建vite.config.js,拷贝如下代码:

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';export default defineConfig({plugins: [uni()],server: {host: "localhost", // 指定服务器应该监听哪个IP地址,默认:localhostport: 5173,        // 指定开发服务器端口,默认:5173proxy: {           // 为开发服务器配置自定义代理规则// 带选项写法:http://localhost:5173/api/posts -> http://jsonplaceholder.typicode.com/posts"/api": {target: "http://jsonplaceholder.typicode.com", // 目标接口changeOrigin: true,            // 是否换源rewrite: (path) => path.replace(/^\/api/, ""),}}}
});

假设接口为http://jsonplaceholder.typicode.com/posts ,那么发送网络请求的时候就可以使用如下方式了:

uni.request({url:"/api/posts"  //这里的/api相当于设置的target目标地址
}).then(res=>{console.log(res);
})

例:
接口地址:https://tiyu.baidu.com/api/match/playerranking/match/NBA/tabId/60

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

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

相关文章

前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题

前言: 本是一个非常简单的请求,即是下载文件。通常的做法如下: 1.前端通过Vue Axios向后端请求,同时在请求中设置响应体为Blob格式。 2.后端相应前端的请求,同时返回Blob格式的文件给到前端(如果没有步骤…

shell脚本 $0-$n $* $@ $# $? $$

各命令详解 1.$0-$n :表示脚本或函数的参数。$0 是脚本的名称,$1 到 $n 是位置参数,每个对应一个传递给脚本或函数的参数。 2.$* :表示所有传递给脚本或函数的参数。它将所有位置参数作为单个字符串显示。 3.$ :表示所…

时序预测 | MATLAB实现GRNN广义回归神经网络时间序列未来多步预测(程序含详细预测步骤)

时序预测 | MATLAB实现GRNN广义回归神经网络时间序列未来多步预测(程序含详细预测步骤) 目录 时序预测 | MATLAB实现GRNN广义回归神经网络时间序列未来多步预测(程序含详细预测步骤)预测效果基本介绍程序设计参考资料预测效果 基本介绍 MATLAB实现GRNN广义回归神经网络时间序列…

大语言模型面试问题【持续更新中】

自己在看面经中遇到的一些面试题,结合自己和理解进行了一下整理。 transformer中求和与归一化中“求和”是什么意思? 求和的意思就是残差层求和,原本的等式为y H(x)转化为y x H(x),这样做的目的是防止网络层数的加深而造成的梯…

openssl3.2 - 官方demo学习 - pkey - EVP_PKEY_DSA_paramgen.c

文章目录 openssl3.2 - 官方demo学习 - pkey - EVP_PKEY_DSA_paramgen.c概述笔记END openssl3.2 - 官方demo学习 - pkey - EVP_PKEY_DSA_paramgen.c 概述 产生DSA的_evp_pkey_ctx 初始化_evp_pkey_ctx 设置参数到_evp_pkey_ctx 由_evp_pkey_ctx产生_evp_pkey 打印_evp_pkey公…

Angular系列教程之观察者模式和RxJS

文章目录 引言RxJS简介RxJS中的设计模式观察者模式迭代器模式 示例代码RxJS 在 Angular 中的应用总结 引言 在Angular开发中,我们经常需要处理异步操作,例如从后端获取数据或与用户的交互。为了更好地管理这些异步操作,Angular中引入了RxJS&…

el-table嵌套两层el-dropdown-menu导致样式错乱

问题&#xff1a; 解决方式&#xff1a; <el-table-column label"操作" fixed"right" width"132" align"center"><template slot-scope"scope"><div v-if"scope.row._index ! 合计"><el-d…

Android 实现跑马灯效果

Android 实现跑马灯效果 Android中实现跑马灯效果有多种方式,本篇简单介绍下: 1: TextView属性实现 <TextViewandroid:layout_width"150dp"android:layout_height"wrap_content"android:background"#77000000"android:padding"5dp&quo…

笨蛋学设计模式结构型模式-装饰者模式【9】

结构型模式-装饰者模式 7.3装饰者模式:arrow_up::arrow_up::arrow_up:7.3.1概念7.3.2场景7.3.3优势 / 劣势7.3.4装饰者模式可分为7.3.5装饰者模式7.3.6实战7.3.6.1题目描述7.3.6.2输入描述7.3.6.3输出描述7.3.6.4代码 7.3.7总结装饰者模式 7.3装饰者模式⬆️⬆️⬆️ 7.3.1概念…

【PWN · GOT表劫持 | 整数溢出】[HGAME 2023 week1]choose_the_seat

整数溢出&#xff0c;加之保护开的不全&#xff0c;可以反复越界修改got表&#xff0c;劫持puts函数实现利用 一、题目概述 限制&#xff1a;v0不可以大于9 理想中数组所在bss端地址&#xff1a; 注意到与got表项距离很近 危险函数只能执行一遍&#xff0c;然后回exit(0) 二…

Next.js 开发指​南(GitHub 115k star​)

Next.js 是一个构建于 Node.js 之上的开源 Web 开发框架&#xff0c;它扩展了最新的 React 特性&#xff0c;集成了基于 Rust 的 JavaScript 工具&#xff0c;可以帮助你快速创建全栈 Web 应用 &#xff08;full-stack Web applications&#xff09; 。 对于有一定 React 基础…

华为数通方向HCIP-DataCom H12-831题库(判断题:21-40)

第21题 OSPF的NSSA区域内,在ASBR路由器上不论路由表中是否存在缺省路由,都会自动产生描述缺省路由的Type7LSA,通告到整个NSSA区域 正确 错误 答案:错误 解析: 在NSSA区域中,ASBR默认情况下不会产生7类LSA表示的默认路由。 第22题 BFD单跳检测是指对两个直连接口进行IP连…

Express安装与基础使用

一、express 介绍 express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架&#xff0c; 官方网站&#xff1a; Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网 中文文档&#xff1a; 路由 - Express 中文文档 简单来说&am…

数据库概念大全

1.数据库的四个基本概念 (1)数据 data:描述事物的符号&#xff0c;数据库中存储的基本对象。 (2)数据库 DataBase, DB:长期存储在计算机内的&#xff0c;有组织的&#xff0c;可共享的大量数据集合、 (3)数据库管理系统 DMBS&#xff1a;位于用户与操作系统之间的一层数据管…

Kafka生产消费流程

Kafka生产消费流程 1.Kafka一条消息发送和消费的流程图(非集群) 2.三种发送方式 准备工作 创建maven工程&#xff0c;引入依赖 <dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId><version>3.3.1…

笔试面试题——继承和多态

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、什么是多态&#xff1f;二、什么是重载、重写(覆盖)、重定义(隐藏)&#xff1f;三、 inli…

实现将信息作为txt,pdf,图片的形式保存到电脑~

PrintableUtils作为输出信息的工具类&#xff1a; package org.example; import com.itextpdf.text.*; import com.itextpdf.text.Font; import com.itextpdf.text.pdf.PdfWriter; import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; im…

QT发布成exe不能运行解决方案

原因 qt发布成exe后不会把依赖的dll自动拷贝到文件夹中. 解决方案&#xff1a; 输入&#xff1a;windeployqt 拖拉 生产的exe到命令行. 会自动copy依赖到文件夹中&#xff1a; 然后就可以单击运行了&#xff01;

【温故而知新】HTML5的Video/Audio

文章目录 一、概念二、Video浏览器支持视频格式视频标签 三、Audio浏览器支持音频格式标签 一、概念 HTML5是HTML的最新版本&#xff0c;它引入了许多新的元素和功能&#xff0c;以适应现代网页开发的需求。以下是HTML5的一些主要特点&#xff1a; 新增语义元素&#xff1a;H…

电路原理1-线性电阻

前言&#xff1a;整理笔记基于清华大学于歆杰老师的《电路原理》&#xff0c;电路原理是基于无源负载和电源组成电路的分析方法。 1.基础数学知识 算术&#xff1a;数字之间的运算 代数&#xff1a;用变量和函数来代替数字 微积分&#xff1a;描述函数的累积效应&#xff0…