首页 > 数码 正文

uniapp配置跨域无效

时间:2023-09-26 作者:佚名

环境要求:vue3。 本文不适用于vue2 或在manifest.json中配置。

解决方案:

(1)需要项目的根路径下面新建文件,名称为:vite.config.js;

(2) 将以下代码复制进去:

import {
	defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
	server: {
		proxy: {
			'/devApi': {
				target: 'http://192.168.0.1:7272/api',
				changeOrigin: true,
				rewrite: (path) => path.replace(/^\/devApi/, ''),
			},
		},
	},
	plugins: [uni()],

});

(3)配置说明

  1. /devApi 为项目的基础请求地址,仅用于本地环境,可自定义;
  2. target 为真正需要访问的接口地址;
  3. rewrite: 为需要将访问的部分地址的路径换掉。如上配置为将/devApi 换为空字符串。

(4)样例解释(以上配置代码对应环境解释)

本地测试访问配置的地址为(前面无须加http等): 
/devApi/login
运行代码到chrome浏览器,控制台network显示的是访问:
http://localhost:XXX/devApi/login;
经过本配置后,实际代理访问的请求地址:
http://192.168.0.1:7272/api/login

注意:本代码仅适用vite和vue3配置。不适用vue2等;

如果上述代码无效,请关闭正在运行项目,再重新运行。

(5)常见问题如下

问题:uni-app设置跨域代理。pathRewrite重写路径在vue2有效、vue3无效。

解决:经检查问题出现在manifest.json中h5字段配置跨域代理,其仅对vue2有效。可代理地址,但pathRewrite无效。


问题:vue2如何配置跨域代理?

解决:方案有两种,参考如下

方案1:manifest.json中配置为:

// manifest.json
{
    "h5": {
        "devServer": {
            "proxy": {
                "/devApi": {
                    "target": "http://192.168.0.1:7272/api",
                    "pathRewrite": {
                        "^/devApi": ""
                    }
                }
            }
        }
    }
}

方案2:项目根路径下新建vue.config.js

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/devApi': {
        target: 'http://192.168.0.1:7272/api',
        pathRewrite: {
          '^/devApi': ''
        }
      }
    },
  }
}

本文信息为网友自行发布旨在分享与大家阅读学习,文中的观点和立场与本站无关,如对文中内容有异议请联系处理。

本文链接:https://www.paituo.cc/tech/1026164.html

  • 小编推荐

    ps里怎么让图片变清晰

    ps里怎么让图片变清晰,ps低像素图片转成高清,简介如下生活中,我们都喜欢拍照,由于拍摄环境的问题,很有可能导致图片的清晰度降低,那么图片怎么变清晰呢?只需一个PS技巧,还能修复模糊的照片。...

    dmp文件用什么打开

    dmp文件用什么打开,dmp文件分析工具使用,简介如下很多windows用户经常会碰到的问题就是电脑蓝屏的问题了,电脑蓝屏又叫蓝屏死机,是微软的操作系统在无法从一个系统错误中恢复过来时,为了保护电脑数据文件不被破坏...

    十种不升糖6大主食和哪些主食最不易升糖

    本文讲述十种不升糖6大主食和哪些主食最不易升糖,简介如下碳水化合物摄入一定要来自多种天然食物,包括粗粮、豆类、薯类、水果等,而不能顿顿是白米饭或白馒头等单一食物。最不易升血糖:燕麦、莜麦等富含黏性物质β葡聚...

    德国女孩青岛喝假德国啤酒获3倍赔偿和商家遭打脸疼不疼?

    本文讲述德国女孩青岛喝假德国啤酒获3倍赔偿和商家遭打脸疼不疼?,简介如下极目新闻评论员吴双建8月2日,德国女孩海雯娜再次发文称,青岛啤酒节商家售卖假啤酒假羊肉事件已经得到妥善解决。她表示,青岛市市场监管局经现场调查,并结合图片视频...

    中国移动不同套餐的价格表是怎样的 中国移动不同套餐信号也不一样

    中国移动不同套餐的价格表是怎样的,简介如下 中国移动作为我国最大的移动通信运营商之一,每年都会针对市场需求推出不同的套餐,许多用户常常被各种套餐的价格和内容搞得眼花缭乱。因此,本篇文章将主要讲解中国移动...

    如何根据需求选择和组装性能适宜的电脑配置 如何根据需求选择打印机?

    如何根据需求选择和组装性能适宜的电脑配置,简介如下 电脑组装是指通过购买各种硬件设备,建立符合自己使用需求的计算机。而在组装电脑时,电脑配置也是一个非常重要的问题。配置的好坏将直接影响到电脑整体的性能表现。因此...

    有没有免费好玩的电脑游戏推荐 有没有免费好玩的电脑游戏

    有没有免费好玩的电脑游戏推荐,简介如下 想要玩游戏,但又不愿意花费太多的钱?没有关系,今天为大家介绍几款免费又好玩的电脑游戏。1.《英雄联盟》(LOL)《英雄联盟》是一款非常受欢迎的多人在线战斗竞技...

    苹果6plus手机壳,如何挑选合适的苹果6Plus手机壳

    本文讲述苹果6plus手机壳,如何挑选合适的苹果6Plus手机壳,简介如下1.苹果6Plus手机壳——你必须知道的那些事 什么是苹果6Plus手机壳? 苹果6Plus手机壳即手机保护壳,用于保护苹果6Plus手机外壳,可以防止手机污染...