Uniapp图片跨域解决

配置Proxy代理即可

参考跨域配置博客

这里只简单讲一下Vue3模板的配置

根目录下创建vite.config.js 仅vue3模板可用 HBuilderX 3.2.0 及以上版本可用

内容配置如下

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

export default defineConfig({
	plugins: [uni()],
	server: {
		port: 5173,
		proxy: {
			'/oss': {
				target: 'https://take-saas.oss-cn-hangzhou.aliyuncs.com', // 目标服务  
				changeOrigin: true,
				rewrite: path => path.replace(/^\/oss/, ''),
			}
		}
	}
});

图片路径改为:

<image class="w-74 h-74 rounded-50" :src="'/oss/wechat_applets/wxshare/report_training_time.png'" mode=""></image>

这样即可解决问题,同理vue2根据上述博客配置完跨域也是这样访问

这边插入一个方法，让所有的图片地址都使用这个方法转一下即可变成上面的形式

const replaceIfDomainIncluded = (inputUrl) => {
	// 下面的key是我们的目标域名,值为代理的前缀
	let domainMap = {
		"http://take-resource.oss-cn-hangzhou.aliyuncs.com": "/resourceoss",
		"https://take-saas.oss-cn-hangzhou.aliyuncs.com":"/sassoss",
		"https://saas.takehr.cn":"/sasstakehr"
	};
	// 检查输入的URL是否包含指定的域名
	for (let domain in domainMap) {
		if (inputUrl.includes(domain)) {
			// 如果包含，替换整个域名为指定的新字符串
			return domainMap[domain] + inputUrl.substring(domain.length);
		}
	}
	return inputUrl;
}

然后将vite.config.js配置一下对应的前缀和对应的目标域名,如下

import {
	defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import {
	resolve
} from './shared.js';
import {
	UnifiedViteWeappTailwindcssPlugin as uvwt
} from "weapp-tailwindcss/vite";

export default defineConfig({
	plugins: [uni()],
	server: {
		port: 5173,
		proxy: {
			'/sassoss': {
				target: 'https://take-saas.oss-cn-hangzhou.aliyuncs.com', // 目标域名  
				changeOrigin: true,
				rewrite: path => path.replace(/^\/oss/, ''),
			},
			'/sasstakehr': {
				target: 'https://saas.takehr.cn', // 目标域名
				changeOrigin: true,
				rewrite: path => path.replace(/^\/sasstakehr/, ''),
			},
			'/resourceoss': {
				target: 'http://take-resource.oss-cn-hangzhou.aliyuncs.com', // 目标域名
				changeOrigin: true,
				rewrite: path => path.replace(/^\/resourceoss/, ''),
			}
		}
	}
});

使用方式

<template>
	<image :src="img" mode=""></image>
</template>
<script setup>
import { onMounted, ref } from 'vue';

	const img = ref('')
	
	onMounted(()=>{
		img.value = replaceIfDomainIncluded('http://take-resource.oss-cn-hangzhou.aliyuncs.com/landingPage_qrcode/2024-12/hrejqn.png')
	})
	
	const replaceIfDomainIncluded = (inputUrl) => {
		// 下面的key是我们的目标域名,值为代理的前缀
		let domainMap = {
			"http://take-resource.oss-cn-hangzhou.aliyuncs.com": "/resourceoss"
		};
		// 检查输入的URL是否包含指定的域名
		for (let domain in domainMap) {
			if (inputUrl.includes(domain)) {
				// 如果包含，替换整个域名为指定的新字符串
				return domainMap[domain] + inputUrl.substring(domain.length);
			}
		}
		return inputUrl;
	}
</script>