uni-app鸿蒙harmony next 使用PDF.js预览文件报错跨域怎么解决

发布于 1周前 作者 caililin 来自 Uni-App

uni-app鸿蒙harmony next 使用PDF.js预览文件报错跨域怎么解决

问题描述

使用的是PDF.js插件预览(web-view :src=xxx)，安卓没有问题，鸿蒙报错

“Access to fetch at ‘https://xxxxxxxxxxxxxxxxxxxx’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”，页面显示Message:Failed to fetch

src直接使用网络地址不用pdf.js可以浏览文件，但浏览页面全屏显示，无法控制样式

想问问各位大佬这个怎么解决？


更多关于uni-app鸿蒙harmony next 使用PDF.js预览文件报错跨域怎么解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于uni-app鸿蒙harmony next 使用PDF.js预览文件报错跨域怎么解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app鸿蒙Harmony Next平台上使用PDF.js预览PDF文件时遇到跨域问题，通常是因为PDF文件存储在一个不允许跨域访问的服务器上。解决跨域问题的一种常见方法是通过配置服务器端的CORS（跨来源资源共享）策略，但在某些情况下，特别是当你不控制服务器时，这种方法可能不适用。下面是一个通过代理服务器解决跨域问题的代码示例，这种方法不依赖于服务器端的CORS配置。

步骤一：搭建本地代理服务器

你可以使用Node.js和express框架快速搭建一个本地代理服务器。这个代理服务器将请求转发到目标服务器，并添加适当的CORS头。

首先，确保你已经安装了Node.js和npm。然后，创建一个新的Node.js项目并安装express和cors包：

mkdir pdf-proxy
cd pdf-proxy
npm init -y
npm install express cors

创建一个名为server.js的文件，并添加以下代码：

const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch');
const app = express();
const port = 3000;

app.use(cors());

app.get('/proxy/:url', async (req, res) => {
    const url = decodeURIComponent(req.params.url);
    try {
        const response = await fetch(url);
        const data = await response.buffer();
        res.setHeader('Content-Type', 'application/pdf');
        res.send(data);
    } catch (error) {
        res.status(500).send(error.message);
    }
});

app.listen(port, () => {
    console.log(`Proxy server running at http://localhost:${port}`);
});

步骤二：在uni-app中使用代理服务器

在你的uni-app项目中，修改请求PDF文件的URL，使其通过你搭建的代理服务器。例如，如果你的PDF文件原始URL是https://example.com/file.pdf，你可以修改为：

const pdfUrl = 'http://localhost:3000/proxy/https%3A%2F%2Fexample.com%2Ffile.pdf';

确保你的uni-app项目能够访问这个本地代理服务器（例如，在开发环境中运行代理服务器和uni-app项目在同一台机器上）。

结论

通过上述方法，你可以绕过跨域限制，成功在uni-app鸿蒙Harmony Next平台上使用PDF.js预览PDF文件。这种方法的关键在于搭建一个本地代理服务器，它负责转发请求并添加CORS头，从而使得跨域请求成为可能。注意，这种方法在生产环境中可能需要额外的安全措施，比如身份验证和访问控制。

回到顶部