uniapp admin 本地运行列表显示图片跨域如何解决

在uniapp admin项目中本地运行时，列表中的图片显示跨域错误该如何解决？图片已经放在static目录下，但访问时仍然提示跨域问题，请问有什么配置或方法可以解决这个跨域限制？

2 回复

在 manifest.json 中配置 h5 的 devServer 跨域代理：

"h5": {
  "devServer": {
    "proxy": {
      "/api": {
        "target": "图片服务器地址",
        "changeOrigin": true,
        "secure": false
      }
    }
  }
}

重启服务即可解决本地开发时的图片跨域问题。


在 UniApp Admin 本地开发中，图片跨域问题通常是由于图片资源与本地开发服务器域名不一致导致的。以下是几种解决方案：

1. 配置本地开发服务器代理

在 vue.config.js 中配置代理，将图片请求转发到目标服务器：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://你的图片域名.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

使用时将图片地址改为 /api/图片路径。

2. 使用 HBuilderX 内置浏览器

HBuilderX 内置浏览器可能会自动处理跨域，直接运行项目测试。

3. 后端设置 CORS 头

若图片服务器可控，请后端添加响应头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

4. 将图片转为 Base64

适用于小图片，通过 uni.getFileSystemManager().readFileSync 读取为 base64：

const base64 = uni.getFileSystemManager().readFileSync(图片路径, 'base64');
const url = `data:image/jpeg;base64,${base64}`;

5. 使用网络图片并确保支持跨域

直接使用支持跨域的图床或 CDN 地址。

操作步骤建议：

  1. 优先尝试配置代理（方案1）。
  2. 若图片服务器可控制，采用方案3。
  3. 临时测试可用方案2或4。

选择适合方案即可解决跨域问题。

回到顶部