Access to XMLHttpRequest blocked by CORS policy

[Anji]

I am using the word Processor server docker images. 

I got CORS error:

Here is my code:

<template>

<div id="app">

<ejs-documenteditorcontainer ref="container" height="900px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>

</div>

</template>

<script>

import Vue from 'vue';

import {

DocumentEditorContainerPlugin,

DocumentEditorContainerComponent,

Toolbar,

} from '@syncfusion/ej2-vue-documenteditor';

Vue.use(DocumentEditorContainerPlugin);

export default {

data: function() {

return {

};

},

mounted: function() {

var dataContext = this;

var uploadDocument = new FormData();

uploadDocument.append('DocumentName', 'app/Data/Getting Started.docx');

var baseUrl = 'http://localhost:6002/api/documenteditor/LoadDocument';

var httpRequest = new XMLHttpRequest();

httpRequest.open('POST', baseUrl, true);

httpRequest.onreadystatechange = function() {

if (httpRequest.readyState === 4) {

if (httpRequest.status === 200 || httpRequest.status === 304) {

//Open the document in DocumentEditor

this.$refs.container.ej2Instances.open(httpRequest.responseText);

}

}

};

httpRequest.send(uploadDocument);

}

}

</script>

<style>

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";

</style>

[Suriya Murugan]

Anji, Can you please change this line uploadDocument.append('DocumentName', 'app/Data/Getting Started.docx'); like below

uploadDocument.append('DocumentName', 'Getting Started.docx');

Please let us know if you still having problem.

[Anji]

It still not working

[Anji]

I change this.$refs to dataContext.$refs sovle theproblem

[Suriya Murugan]

Anji, we are glad that you have resolved your issue at your end and thanks for sharing it with us.