uniapp vue3 H5跨域踩坑

开发移动端H5的时候由于后端接口没有做跨域处理，因此需要做下服务器代理，于是百度搜索了uniapp下h5的跨域配置

在manifest下的h5配置proxy，大概是这样:

"h5": {"devServer": {"https": false,"proxy": {"/api": {"target": "服务器地址","pathRewirte": {//路径重写"^/api": "/"}}}}}

但是配置完后，怎么都不生效，一直返回404，开始以为是没重启项目，端口占用等等一系列的问题

逐个排查后发现，配置生效了，服务器的确是代理了，但是pathRewirte的地址重写不会生效

查看uniapp文档

pathRewirte是webpack的写法，因此在vue2的项目中不存在这个问题，vue3中使用的vite需要使用函数写法重写路径，但是json不支持写函数，因此无法重写路径。

解决方案

在根路径下新建vite配置文件vite.config.js

import {defineConfig
} from "vite"
import uni from "@dcloudio/vite-plugin-uni";export default defineConfig({plugins: [uni()],server: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')},}}
})

重启项目即可使用vite的配置文件进行代理。

vue3下的uniapp跨域踩坑相关推荐

html2canvas跨域踩坑日常
这两天接到公司的指令做海报图分享然后尝试使用html2canvas+uview+uniapp进行编写踩坑如下 html2canvas跨域问题我司使用的是oss云存储,起初发生跨域以为是本地原因导 ...
vue2.0下axios实现跨域踩的坑
按踩坑顺序叙述.本人对http了解太少,所以坑踩得较多. 1.开始进行跨域时,知道vue2.0官方推荐axios进行ajax请求,大致看一下https://www.npmjs.com/package/ ...
uc浏览器请求被拦截报跨域踩坑记录
记录下开发时uc浏览器请求被拦截时遇到的问题请求在uc浏览器出现跨域问题 app使用uniapp开发,使用plus.runtime.launchApplication来打开并跳转指定页面,并在Xco ...
【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑已解决
前后端对接必出bug,最近连续对接了两个项目,对解决跨域有点感觉了,跟大家分享一下经验,都是血的教训- 两个项目都是Springboot+Vue(axios网络请求).本人主要负责前端,所以前端会分享 ...
iframe子页面ajax报错,iframe跨域踩坑
前言工做中,有些系统是利用的iframe.有一次忽然遇到了一个使人费解的跨域报错,没有发请求,却报了"Error:Blocked a frame with origin...from ac ...
socket.io跨域踩坑
一.koa结合socket.io 后端代码: // 引入依赖 const koa = require("koa"); // 初始化koa const app = new koa() ...
Elasticserch 5.6到Elasticsearch7.11跨版本升级踩坑记录
Elasticserch 5.6到Elasticsearch7.11跨版本升级踩坑记录 1.背景公司老的业务使用的是Elasticsearch5.6版本,使用的客户端是TransportClient ...
uni-app跨域的解决以及如何封住api，请求接口
uni-app跨域的解决以及如何封住api,请求接口 let request = function(url, data = {}, method = "GET") {return ...
【记录】VUE3 + VITE + TS 配置跨域
[记录]VUE3 + VITE + TS 配置跨域在vite.config.ts进行如下设置在vite.config.ts进行如下设置 server: {host: true,// 设置端口号po ...

vue3下的uniapp跨域踩坑

uniapp vue3 H5跨域踩坑

解决方案

vue3下的uniapp跨域踩坑相关推荐

最新文章

热门文章