当 tinymce 与反应应用程序集成时，CORS 出错

Question

我已将 tinymce 与我的 React 应用程序集成。一切正常，但是当我上传图片时，CORS 出现以下错误：

plugin.min.js:9 从源“http://localhost:3000”访问“file:///C:/Users/Javeria/Documents/react/moonleaks/backend/media/images/”处的 XMLHttpRequest 已被阻止通过 CORS 策略：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。

export default class App extends Component {

handleEditorChange = (e) => {
console.log('Content was updated:', e.target.getContent());
}



render() {
return (
<Editor
initialValue="<p>This is the initial content of the editor</p>"
init={{
plugins: 'link image code',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | 
code',

selector: 'textarea',  // change this value according to your html


images_upload_url:
'file:///C:/Users/Javeria/Documents/react/moonleaks/backend/media/images/',
images_upload_credentials: true
}}
onChange={this.handleEditorChange}
/>

);
}

Node server function:
var storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'media/images')
},
filename: (req, file, cb) => {
cb(null, file.originalname)
}
});
const upload = multer({ storage })

app.post('/upload', upload.single('image'), (req, res) => {
    if (req.file)
    res.json({
    imageUrl: `images/${req.file.filename}`
    , file_size : req.file});
    else 
    res.status("409").json("No Files to Upload.");
    });                             

我该如何纠正这个错误？

Answer 1

您不能直接将图像上传到系统的驱动器文件夹，您必须实现一个服务器来接收图像。

将images_upload_url替换为服务器上的路径（可以在您的本地主机上运行）。

参考PHP文件上传处理程序Link