uniapp从后端请求字体文件时出现跨域错误如何解决？

在uniapp开发中，我从后端请求字体文件（如.ttf/.woff）时遇到跨域错误，浏览器提示"No ‘Access-Control-Allow-Origin’ header is present"。已确认后端接口其他数据请求正常，唯独字体文件触发CORS限制。尝试过在manifest.json配置跨域代理，但未生效。请问如何在uniapp中正确解决字体文件的跨域问题？是否需要特殊响应头配置或uniapp专属处理方式？

2 回复

在后端设置CORS响应头，允许前端域名访问字体文件。例如添加Access-Control-Allow-Origin: *或指定域名。


在 UniApp 中从后端请求字体文件时出现跨域错误，通常是由于浏览器的同源策略限制。以下是几种解决方法：

1. 后端配置 CORS（推荐）

在后端服务器中添加跨域响应头，允许 UniApp 的域名访问字体文件。

  • 示例响应头：
    Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
  • 如果使用 Nginx，可在配置中添加：
    location ~* \.(woff|woff2|ttf|eot)$ {
    add_header Access-Control-Allow-Origin *;
}

2. 使用 UniApp 的本地代理（开发环境）

在 manifest.json 中配置代理，将字体请求转发到后端：

{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "http://your-backend.com",
          "changeOrigin": true,
          "pathRewrite": { "^/api": "" }
        }
      }
    }
  }
}

请求时使用相对路径（如 /api/fonts/font.ttf）。

3. 将字体文件转为 Base64

将字体文件转换为 Base64 格式，直接嵌入 CSS 中：

@font-face {
  font-family: 'MyFont';
  src: url('data:font/woff2;base64,d09GRgABAAAA...') format('woff2');
}

但注意这会增大 CSS 文件体积。

4. 使用第三方存储服务

将字体文件上传至支持 CORS 的 CDN（如阿里云 OSS、腾讯云 COS），并直接引用 CDN 地址。

注意事项：

  • 生产环境中务必通过后端或 CDN 解决跨域问题。
  • 确保字体文件路径正确，且服务器可正常访问。

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

回到顶部