달고나치약
347
2020-11-02 18:31:20
0
181

리치에디트를 사용 중 입니다. 이미지를 복사 붙여넣기 하는중 CORS 오류 질문 드립니다.



안녕하세요

노드JS와 데브익스프레스에 리치에디트를 사용 중 입니다.

현재 로컬 환경에서 테스트 중 이고요

다른 페이지에 이미지와 텍스트를 복사해서 리치에디트에 복사하면 이미지는 포함 되어있는데

보이지 않습니다.

오류 메세지는


Access to XMLHttpRequest at 'http://image.kmib.co.kr/online_image/2020/1102/611212110015173544_1.jpg' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS 오류라고 나타납니다..

그래서 검색해서 CORS NPM도 받아서 적용 해 보았지만 동일한 오류가 발생합니다.

코드 첨부 드립니다.

**index.router**


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

router.post('/api/SaveDocument', function (req, res) {
  var fileAsBase64 = req.body.base64;
  var fileName = req.body.fileName;
  var format = req.body.format;
  var reason = req.body.reason;
  console.log('nice nice');
  fs.writeFile(`${fileName}.${getDocumentExtension(format)}`, fileAsBase64, 'base64', (err) => { });
  res.sendStatus(200);
});

function getDocumentExtension(format) {
  switch (format) {
      case '4': return "docx";
      case '2': return "rtf";
      case '1': return "txt";
  }
  return "docx";
}


**app.js**

var createError = require('http-errors');
const fs = require('fs');
const express = require('express');
const bodyParser = require('body-parser');
var path = require('path');
var indexRouter = require('./routes/index');
const cors = require('cors');
var app = express();
const port = 8080;

app.use(express.static('public'));
app.use(express.static(path.join('node_modules', 'devexpress-richedit', 'dist', 'custom')));
app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies

// view engine setup
app.set('views', path.join(__dirname, '/views'));
app.set('view engine', 'ejs');
app.use(cors());

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '/')));

app.use('/', indexRouter);
app.use('/users', usersRouter);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});


**main.ejs**

    <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
	<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.compact.css" />
	<link rel="stylesheet" type="text/css" href="node_modules/devexpress-richedit/dist/dx.richedit.css" />

	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>
<body>
    <div id='rich-container' style="width: 100%; height: 900px">TESTEST</div>
</body>

	
<script>
    $(document).ready(function () {

        // var imgIterator = richEdit.images.getIterator();

        const options = DevExpress.RichEdit.createOptions();

        // options.imgIterator
        options.bookmarks.visibility = true;
        options.bookmarks.color = '#ff0000';

        options.confirmOnLosingChanges.enabled = true;
        options.confirmOnLosingChanges.message = 'testtest';

        options.fields.updateFieldsBeforePrint = true;
        options.fields.updateFieldsOnPaste = true;

        // options.mailMerge.activeRecord = 2;
        // options.mailMerge.viewMergedData = true;
        // options.mailMerge.dataSource = [
        //     { Name: 'Indy', age: 32 },
        //     { Name: 'Andy', age: 28 },
        // ];

        // events
        options.events.activeSubDocumentChanged = () => { };
        options.events.autoCorrect = () => { };
        options.events.calculateDocumentVariable = () => { };
        options.events.characterPropertiesChanged = () => { };
        options.events.contentInserted = () => { };
        options.events.contentRemoved = () => { };
        options.events.documentChanged = () => { };
        options.events.documentFormatted = () => { };
        options.events.documentLoaded = () => { };
        options.events.gotFocus = () => { };
        options.events.hyperlinkClick = () => { };
        options.events.keyDown = () => { };
        options.events.keyUp = () => { };
        options.events.paragraphPropertiesChanged = () => { };
        options.events.lostFocus = () => { };
        options.events.pointerDown = () => { };
        options.events.pointerUp = () => { };
        options.events.saving = () => { };
        options.events.saved = () => { };
        options.events.selectionChanged = () => { };    
        options.events.customCommandExecuted = (s, e) => {
            switch (e.commandName) {
            case 'insertEmailSignature':
                s.document.insertParagraph(s.document.length);
                s.document.insertText(s.document.length, '_________');
                s.document.insertParagraph(s.document.length);
                s.document.insertText(s.document.length, 'Best regards,');
                s.document.insertParagraph(s.document.length);
                s.document.insertText(s.document.length, 'John Smith');
                s.document.insertParagraph(s.document.length);
                s.document.insertText(s.document.length, 'john@example.com');
                s.document.insertParagraph(s.document.length);
                s.document.insertText(s.document.length, '+1 (818) 844-0000');
                break;
            }
        };


        // options.view.viewType = DevExpress.RichEdit.ViewType.PrintLayout;
        // options.view.simpleViewSettings.paddings = {
        //   left: 15,
        //   top: 15,
        //   right: 15,
        //   bottom: 15,
        // };
            console.log('test1');
        options.autoCorrect = {
            correctTwoInitialCapitals: true,
            detectUrls: true,
            enableAutomaticNumbering: true,
            replaceTextAsYouType: true,
            caseSensitiveReplacement: false,
            replaceInfoCollection: [
                { replace: "wnwd", with: "well-nourished, well-developed" },
                { replace: "(c)", with: "©" }
            ],
        };
        console.log('test2');
        // capitalize the first letter at the beginning of a new sentence/line
        options.events.autoCorrect = function (s, e) {
            if (e.text.length == 1 && /\w/.test(e.text)) {
                var prevText = s.document.getText(new DevExpress.RichEdit.Interval(e.interval.start - 2, 2));
                if (prevText.length == 0 || /^(\. |\? |\! )$/.test(prevText) || prevText.charCodeAt(1) == 13) {
                    var newText = e.text.toUpperCase();
                    if (newText != e.text) {
                        s.beginUpdate();
                        s.history.beginTransaction();
                        s.document.deleteText(e.interval);
                        s.document.insertText(e.interval.start, newText);
                        s.history.endTransaction();
                        s.endUpdate();
                        e.handled = true;
                    }
                }
            }
        };  
        console.log('test3');
        // options.exportUrl = 'https://siteurl.com/api/';
        options.exportUrl = '/api/SaveDocument';
        

        options.readOnly = false;
        options.width = '1700px';
        options.height = '800px';

        var richElement = document.getElementById("rich-container");
        console.log('test4');
        window.rich = DevExpress.RichEdit.create(richElement, options);
        console.log('test5');
    });
</script>


미리 답변 감사합니다!



0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.