Как загрузить изображение в CKEditor с помощью Angularjs и NodeJs

Question

После некоторых исследований я могу отправить данные на сервер и получить ответ, однако, на ответ я получаю ошибку

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

и

Uncaught DOMException: Blocked a frame with origin "http://localhost:3001" from accessing a cross-origin frame. 

Как осуществить эту проверку в angularjs части в CKEditor, чтобы получить URL и установить 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> 

tmpl.html

<div id="a" ckeditor="vm.options" ng-model="vm.textInput" ready="vm.onReady()"></div> 

controller.js

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

стороне сервера: локальный: 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; 

приложение.JS

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); 

Источники Круги:

• https://alfrednutile.info/posts/50
• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• https://github.com/lemonde/angular-ckeditor
• SecurityError: Blocked a frame with origin from accessing a cross-origin frame

Скриншоты в последовательности события:

Выбрав вкладку загрузки изображений в CKEditor и выбора изображения из местного

После нажатия кнопки отправить на сервер получить ответ от сервера и нет ошибки до еще

При нажатии на изображение информация как дано п в CKEditor он должен показать URL изображения в текстовом поле,

Когда я снова откройте вкладку загрузки, ответ сервера в IFRAME с тэгом отправить с сервера, а затем я получаю ошибку ниже

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

Кроме того, его не позволяя мне закрыть всплывающее

Answer 1

Многие NodeJs разработчик имеет такой же вопрос. Как загружать и просматривать изображения или файлы с помощью CKEditor и Nodejs. Поскольку новый ckeditor не предоставляет БЕСПЛАТНОГО загрузчика файлов/изображений, как его предшественник Fckeditor.

Таким образом, этот solutiuon поможет им быстро интегрировать Ckeditor с Nodejs вместе с возможностью загрузки файлов и изображений.

Я создал простое решение с загрузчиками изображений CkEditor и nodejs и браузером БЕСПЛАТНО. До сих пор нет бесплатной версии.

Github repository for this solution