Запрос между источниками заблокирован с кодом состояния: 200 при создании документа при реагировании с помощью Docxtempl ⇐ Php

[Anonymous]

У меня возникли проблемы с созданием документа на веб-странице локального хоста. Проект использует бэкэнд laravel 11 (со стартовым набором Breeze) и интерфейс Vite-React.
При попытке его создания я получаю сообщение об ошибке в консоли:

Запрос между источниками заблокирован: политика одного и того же происхождения запрещает чтение
удаленного ресурса по адресу http://localhost:8000/Template_Doc.docx.
(Причина: заголовок CORS «Access-Control-Allow-Origin» отсутствует). Код состояния
: 200.

Мой внутренний порт находится на порту 8000, а веб-порт — на 5173.
У меня есть отдельные папки для внутреннего и внешнего интерфейса.
Я сохранил документ шаблона в каталоге «/backend/public/Template_Doc.docx»
В бэкэнде/ у меня есть server.js:

Код: Выделить всё

const express = require("express");
const path = require("path");
const fs = require("fs");
const cors = require("cors");

const app = express();
const PORT = 8000;

// Global CORS middleware
app.use(
cors({
origin: "http://localhost:5173",
credentials: true,
methods: ["GET", "POST", "OPTIONS"],
allowedHeaders: ["Content-Type", "Authorization", "Accept"],
exposedHeaders: ["Content-Disposition"],
})
);

// Pre-flight requests
app.options("*", cors());

// Middleware for all routes to ensure CORS headers
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "http://localhost:5173");
res.header("Access-Control-Allow-Credentials", "true");
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
res.header(
"Access-Control-Allow-Headers",
"Content-Type, Authorization, Accept"
);
res.header("Access-Control-Expose-Headers", "Content-Disposition");
next();
});

// Route for template file
app.get("/storage/Template_Doc.docx", (req, res) => {
const filePath = path.join(
__dirname,
"public",
"storage",
"Template_Doc.docx"
);
console.log("Attempting to serve template from:", filePath);

try {
if (fs.existsSync(filePath)) {
const stats = fs.statSync(filePath);
console.log("File found:", {
size: stats.size,
permissions: stats.mode.toString(8),
});

// Set necessary headers
res.header(
"Content-Type",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
);
res.header(
"Content-Disposition",
"attachment; filename=Template_Doc.docx"
);

// Send file
res.sendFile(filePath, (err) => {
if (err) {
console.error("Error sending file:", err);
res.status(500).send("Error sending file");
} else {
console.log("File sent successfully");
}
});
} else {
console.error("File not found at:", filePath);
res.status(404).send("File not found");
}
} catch (error) {
console.error("Error accessing file:", error);
res.status(500).send("Server error");
}
});

// Start server
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);

// Check template on startup
const templatePath = path.join(
__dirname,
"public",
"storage",
"Template_Doc.docx"
);
if (fs.existsSync(templatePath)) {
const stats = fs.statSync(templatePath);
console.log("Template file ready:", {
path: templatePath,
size: stats.size,
permissions: stats.mode.toString(8),
});
} else {
console.error("Template file not found at:", templatePath);
}
});

В backend/cors.php я настроил:

Код: Выделить всё

'paths' => ['register', 'login', 'logout','api/*', 'Template_Doc.docx', 'sanctum/csrf-cookie'],

'allowed_methods' => ['*'],

'allowed_origins' => ['http://localhost:5173'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' =>  true

В каталоге frontend/src/comComponents/DocumentPage.jsx у меня есть функции:
loadFile:

Код: Выделить всё

function loadFile(url, callback) {
const fullUrl = `http://localhost:8000${url}`;
console.log('Attempting to load file from:', fullUrl);

fetch(fullUrl, {
method: 'GET',
credentials: 'include',
headers: {
'Accept': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
},
mode: 'cors',
})
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.arrayBuffer();
})
.then((buffer) => {
console.log('Template loaded successfully, size:', buffer.byteLength);
callback(null, buffer);
})
.catch((error) => {
console.error('Error loading template:', error);
alert('Error loading template. Please check if the server is running and the file is accessible.');
callback(error);
});
}

Также сгенерируйте документ:

Код: Выделить всё

const generateDocument = async (e) => {
e.preventDefault();
console.log('Starting document generation...');

try {
// Use the direct path since we're handling it in the loadFile function
loadFile('/Template_Doc.docx', function (error, content) {
if (error) {
console.error('Error loading file:', error);
return;
}
const zip = new PizZip(content);
const doc = new Docxtemplater(zip, { paragraphLoop: true, linebreaks: true });
doc.render(formData);
const out = doc.getZip().generate({
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
});
saveAs(out, 'output.docx');
});
} catch (error) {
console.error('Error in generate document:', error);
console.error('Error details:', {
message: error.message,
stack: error.stack
});
alert('Error in document generation process. Please check the console for details.');
}
};

Я не могу найти в Интернете решения этой ошибки. Может кто-нибудь дать совет?

Подробнее здесь: https://stackoverflow.com/questions/792 ... ocument-on