Javascript 如何使用Angularjs和NodeJs在ckeditor中上载图像

经过一些研究，我能够将数据发送到服务器并得到响应，然而，在响应时，我得到了错误

Blocked a frame with origin "http://localhost:3001" from accessing a frame with origin "http://localhost:3010". Protocols, domains, and ports must match.

及

如何在ckeditor中实现这个检入angularjs部分，以获取url并在

AngularJs:localhost:3001

index.html

<script>
        window.addEventListener("message", receiveMessage, false);

        function receiveMessage(event)
        {
            var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
            if (origin !== "http://localhost:3010" || origin !== "http://example.com")
                return;

            // ...
        }
    </script>

服务器端：本地主机：3010

遵循路径的editor.js

/ckeditor/pictures

var express = require('express');
var router = express.Router();


router.post('/', function (req, res, next) {
    console.log("got it");
   var path = "http://mytestplan.com/img/256/pdb.png";
var data = "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(1,path,\"File uploaded\");</script>"
res.writeHeader(200, {"Content-Type": "text/html", });
html = "";
html += "<script type=\"text/javascript\">";
html += " var funcNum = 1;";
html += " var url = \"" + path + "\";";
html += " var message = \"Uploaded file successfully\";";
html += "";
html += " window.parent.CKEDITOR.tools.callFunction(funcNum, url, message);";
html += "</script>";
console.log(html);
res.write(html);
res.end();

});

module.exports = router;

资料来源如下：

事件顺序中的屏幕截图：

在ckeditor中选择图像上载选项卡并从本地选择图像

单击“发送到服务器”后，从服务器获取响应，到目前为止没有错误

单击ckeditor中给出的图像信息时，应在文本框中显示图像url

当我再次单击upload选项卡时，服务器响应在iframe中，带有脚本标记send from server，然后我得到以下错误

Blocked a frame with origin "http://localhost:3001" from accessing a frame with origin "http://localhost:3010". Protocols, domains, and ports must match

---

另外，它不允许我关闭弹出窗口

许多NodeJs开发人员都有同样的问题。如何通过CKEditor和Nodejs上传和浏览图像或文件。新的ckeditor不像其前身Fckeditor那样提供免费的文件/图像上传程序

因此，此解决方案将帮助他们非常快速地将Ckeditor与NodeJ以及文件/图像上传选项直接集成

我用CkEditor和nodejs图像上传器和免费浏览器创建了一个简单的解决方案。目前还没有免费版本

---

欢迎链接到解决方案，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及它为什么在那里，然后引用您链接到的页面最相关的部分，以防目标页面不可用@Dhiraj这个问题是跨来源的，使用的是diff server中托管的客户端和服务器，当我分离客户端和服务器代码时，它也抛出了相同的错误。我运行后端，用于与客户端相同的端口的图像上载，然后使用micro service用于后端API中的其他功能。剩下的一切都很顺利，

where API_ENDPOINT = localhost:3010
vm.options = {
            language: 'en',
            allowedContent: true,
            entities: false,
            filebrowserImageUploadUrl : API_ENDPOINT.url+'/ckeditor/pictures' 
        };
        vm.onReady = function () {
            // ...
        };

var express = require('express');
var router = express.Router();


router.post('/', function (req, res, next) {
    console.log("got it");
   var path = "http://mytestplan.com/img/256/pdb.png";
var data = "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(1,path,\"File uploaded\");</script>"
res.writeHeader(200, {"Content-Type": "text/html", });
html = "";
html += "<script type=\"text/javascript\">";
html += " var funcNum = 1;";
html += " var url = \"" + path + "\";";
html += " var message = \"Uploaded file successfully\";";
html += "";
html += " window.parent.CKEDITOR.tools.callFunction(funcNum, url, message);";
html += "</script>";
console.log(html);
res.write(html);
res.end();

});

module.exports = router;

var allowCrossDomain = function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
    next();
};
app.use(allowCrossDomain);

Blocked a frame with origin "http://localhost:3001" from accessing a frame with origin "http://localhost:3010". Protocols, domains, and ports must match