ccess to XMLHttpRequest at 'https://wewanjia.com/comps/c-svg/icons/copy.svg' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 以上组件加载时报这个错如何解决

### 解决方案 为了在 UniApp 和 Vue2 中解决加载外部 SVG 文件时遇到的 CORS 错误问题，可以采取以下措施： #### 1. **服务器端配置 CORS** 通过调整后端服务的 CORS 设置，允许前端应用访问资源。以下是基于 ASP.NET 的解决方案[^2]： ```csharp using YS.Common; using Microsoft.AspNetCore.Builder; using Microsoft.Extensions.DependencyInjection; namespace YS.WebApi.Extensions { public static class SetupCors { public static void AddCorsSetup(this IServiceCollection services) { if (services == null) throw new ArgumentNullException(nameof(services)); services.AddCors(options => { options.AddPolicy("AllowAllOrigins", policy => policy.AllowAnyOrigin() .AllowAnyHeader() .AllowAnyMethod()); }); } public static void UseCorsSetup(this IApplicationBuilder app) { app.UseCors("AllowAllOrigins"); } } } ``` 此代码片段定义了一个名为 `AllowAllOrigins` 的策略，该策略允许任何来源、头部和方法。 如果无法修改后端代码，则可以通过 Vite 或其他构建工具设置反向代理来规避跨域限制[^1]。 --- #### 2. **Vite 反向代理配置** 对于使用 Vite 构建的应用程序，可以在开发环境中配置反向代理以解决跨域问题。以下是完整的 `vite.config.ts` 配置示例[^1]： ```typescript import { UserConfig, ConfigEnv, loadEnv } from 'vite'; import vue from '@vitejs/plugin-vue'; import path from 'path'; export default ({ command, mode }: ConfigEnv): UserConfig => { const env = loadEnv(mode, process.cwd()); return { plugins: [vue()], server: { host: 'localhost', port: Number(env.VITE_APP_PORT), open: true, proxy: { [env.VITE_APP_BASE_API]: { target: 'http://example.com/api', // 替换为目标 API 地址 changeOrigin: true, rewrite: (path) => path.replace(new RegExp(`^${env.VITE_APP_BASE_API}`), '') } } }, resolve: { alias: { "@": path.resolve(__dirname, "./src") } } }; }; ``` 在此配置中，`proxy` 属性用于将请求转发到目标服务器，并通过 `changeOrigin` 参数伪装请求源。 --- #### 3. **UniApp 中处理 SVG 资源** 由于 UniApp 支持 H5 和小程序两种平台，在不同环境下需分别考虑如何引入 SVG 图标。 ##### （1）**H5 平台** 可以直接通过 `<img>` 标签或 CSS 背景图的方式加载 SVG 文件。例如： ```html <img src="https://example.com/icon.svg" alt="SVG Icon"> ``` 或者使用 Axios 请求获取 SVG 数据并动态渲染： ```javascript const axios = require('axios'); axios.get('https://example.com/icon.svg', { responseType: 'text' }) .then(response => { document.getElementById('svg-container').innerHTML = response.data; }); ``` ##### （2）**小程序平台** 微信小程序不支持直接加载远程 SVG 文件，因此建议先下载 SVG 文件并将其转换为 Base64 编码字符串存储于项目中。之后可通过如下方式展示： ```css background-image: url(data:image/svg+xml;base64,...); ``` 也可以利用 Canvas 绘制 SVG 图形，具体实现可参考官方文档[^3]。 --- #### 4. **调试与验证** 完成以上配置后，可在微信开发者工具中测试效果。确保以下几点无误： - 小程序已启用网络权限； - 所有静态资源均能成功加载； - 开发者工具控制台未报错。 --- ### 总结 综合来看，解决 Vue 组件加载外部 SVG 文件时产生的 CORS 错误会涉及前后端协作以及针对特定框架（如 UniApp）的不同适配逻辑。上述方法能够有效应对这一挑战。