英文:
TypeError from trying to resolve CORS error
问题
I have [Vue warn] TypeError from trying to resolve CORS error.
Here is my code saving data to server.
saveToServer() {
// Upload Code
let formData: any = new FormData()
formData.append(
'0c42819f7026a5b7f407c011c0b9523dad249b9ceef29cddcc5140b6ab922867',
''
)
formData.append(
'robot_file',
new Blob([JSON.stringify(this.robot)]),
`${this.taskName}.json`
)
formData.append(
'robot_json',
new Blob([this.robot.toRobot(0)]),
`${this.taskName}.robot`
)
axios
.post(
'http://ideasolutions.co.kr/bpm/common/insertRpaProcessByDeviceList',
formData,
{ headers: formData.getHeaders() }
)
.then((data: any) => {
console.log('Upload End')
console.log(data)
})
}
To resolve CORS error, I added
axios.post('', formData, { headers: formData.getHeaders() }, ...)
but it didn't work.
After adding that code, CORS warning was gone, but TypeError came.
[Vue warn]: Error in v-on handler: "TypeError: formData.getHeaders is not a function"
found in
---> <VBtn>
<VAppBar>
<ModelCanvas> at src/components/designer/ModelCanvas.vue
<VApp>
<App> at src/App.vue
<Root>
TypeError: formData.getHeaders is not a function
at VueComponent.ModelCanvas.saveToServer (ModelCanvas.vue?ba42:162)
at click (ModelCanvas.vue?4f3d:93)
at invokeWithErrorHandling (vue.runtime.esm.js?c320:3017)
at VueComponent.invoker (vue.runtime.esm.js?c320:1815)
at invokeWithErrorHandling (vue.runtime.esm.js?c320:3017)
at VueComponent.Vue.$emit (vue.runtime.esm.js?c320:3716)
at VueComponent.click (vuetify.js?ed19:2564)
at invokeWithErrorHandling (vue.runtime.esm.js?c320:3017)
at HTMLButtonElement.invoker (vue.runtime.esm.js?c320:1815)
at HTMLButtonElement.original_1._wrapper (vue.runtime.esm.js?c320:7473)
英文:
I have [Vue warn] TypeError from trying to resolve CORS error.
Here is my code saving data to server.
saveToServer() {
// Upload Code
let formData: any = new FormData()
formData.append(
'0c42819f7026a5b7f407c011c0b9523dad249b9ceef29cddcc5140b6ab922867',
''
)
formData.append(
'robot_file',
new Blob([JSON.stringify(this.robot)]),
`${this.taskName}.json`
)
formData.append(
'robot_json',
new Blob([this.robot.toRobot(0)]),
`${this.taskName}.robot`
)
axios
.post(
'http://ideasolutions.co.kr/bpm/common/insertRpaProcessByDeviceList',
formData,
{ headers: formData.getHeaders() }
)
.then((data: any) => {
console.log('Upload End')
console.log(data)
})
}
To resolve CORS error, I added
axios.post('', formData, {headers: formData.getHeaders()}, ...)
but it didn't work.
After adding that code, CORS warning was gone, but TypeError came.
[Vue warn]: Error in v-on handler: "TypeError: formData.getHeaders is not a function"
found in
---> <VBtn>
<VAppBar>
<ModelCanvas> at src/components/designer/ModelCanvas.vue
<VApp>
<App> at src/App.vue
<Root>
TypeError: formData.getHeaders is not a function
at VueComponent.ModelCanvas.saveToServer (ModelCanvas.vue?ba42:162)
at click (ModelCanvas.vue?4f3d:93)
at invokeWithErrorHandling (vue.runtime.esm.js?c320:3017)
at VueComponent.invoker (vue.runtime.esm.js?c320:1815)
at invokeWithErrorHandling (vue.runtime.esm.js?c320:3017)
at VueComponent.Vue.$emit (vue.runtime.esm.js?c320:3716)
at VueComponent.click (vuetify.js?ed19:2564)
at invokeWithErrorHandling (vue.runtime.esm.js?c320:3017)
at HTMLButtonElement.invoker (vue.runtime.esm.js?c320:1815)
at HTMLButtonElement.original_1._wrapper (vue.runtime.esm.js?c320:7473)
答案1
得分: 1
首先，FormData 没有 getHeaders 函数。
要解决跨域错误，不能在前端（客户端）处理，必须从服务器端处理，通过在服务器上启用客户端的来源。
如果你的服务器基于 express.js，请参考这里。
英文:
Firstly, FormData don't have function getHeaders.
To resolve CORS error, you can't do it from front-end (client-side), you must handle it from server-side by enable client's origin on server.
If your server base on express.js, please reference here
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论