Access to fetch at 'http://192.168.0.14:8090/files/sop/%E6%B5%8B%E8%AF%95__17587...
🚨 错误信息
Access to fetch at 'http://192.168.0.14:8090/files/sop/%E6%B5%8B%E8%AF%95__1758767261041_0.png' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
🤖 AI解决方案
Access to fetch at 'http://192.168.0.14:8090/files/sop/%E6%B5%8B%E8%AF%95__1758767261041_0.png' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Access to fetch at 'http://192.168.0.14:8090/files/sop/%E6%B5%8B%E8%AF%95__1758767261041_0.png' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.原因分析
这是典型的跨域资源共享（CORS）策略阻止了请求。浏览器出于安全考虑，不允许网页在未授权的情况下从另一个域请求资源。在这个场景下，你的前端代码（源自null，通常表示本地文件或未部署的页面）尝试访问一个不同源（http://192.168.0.14:8090）的资源，而目标服务器没有在响应头中明确允许来自 null 源的访问。
解决方案
在服务器端（http://192.168.0.14:8090）配置 CORS。你需要修改服务器的响应头，添加 Access-Control-Allow-Origin 字段。
示例（以 Node.js Express 为例）：
const express = require('express');
const cors = require('cors'); // 需要安装 cors 库: npm install cors
const app = express();
// 允许所有源访问，或指定允许的源
app.use(cors({
origin: '*' // 或者指定为 'http://localhost:PORT', 'http://your-frontend-domain.com' 等
}));
// ... 你的其他路由和中间件 ...
app.listen(8090, () => {
console.log('Server listening on port 8090');
});如果使用的是其他服务器技术（如 Nginx, Apache, Spring Boot, .NET 等），请查阅相应文档进行 CORS 配置。
预防措施
- 前后端分离开发时，务必配置服务器 CORS 策略，明确允许前端访问的源。
- 在本地开发时，可以使用浏览器插件（如 CORS Everywhere for Chrome）来临时绕过 CORS 限制，但这不适用于生产环境。