We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Access to XMLHttpRequest blocked by CORS policy

I am using the word Processor server docker images. 

I got CORS error:

Screenshot from 2022-11-29 20-35-35.png

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>


4 Replies

SM Suriya Murugan Syncfusion Team November 30, 2022 01:26 PM UTC

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.




AN Anji replied to Suriya Murugan November 30, 2022 10:56 PM UTC

Screenshot from 2022-11-30 14-10-08.png

Screenshot from 2022-11-30 16-56-01.png

It still not working



AN Anji November 30, 2022 11:25 PM UTC

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



SM Suriya Murugan Syncfusion Team December 9, 2022 04:33 AM UTC

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


Loader.
Up arrow icon