Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(upload): 修复进度条引起跨域导致文件上传失败问题 #21260

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

gxdvip
Copy link

@gxdvip gxdvip commented Aug 24, 2021

由于WEB后端配置CORS未处理OPTION,upload进度条效果引起跨域导致文件上传失败,故增加隐藏进度条选项来解决:回调函数onProgress() {return false} 即可

由于WEB后端配置CORS未处理OPTION,upload进度条效果引起跨域导致文件上传失败,故增加隐藏进度条选项来解决:onProgress() {return false} 即可
@element-bot
Copy link
Member

✔️ Deploy Preview for element ready!

🔨 Explore the source changes: 8a4149f

🔍 Inspect the deploy log: https://app.netlify.com/sites/element/deploys/6124c1933937de000823a1ab

😎 Browse the preview: https://deploy-preview-21260--element.netlify.app/

@cs1707
Copy link
Contributor

cs1707 commented Aug 25, 2021

A bit confused by this solution. I think the correct solution would be to have the backend support OPTIONS method.

In CORS, a preflight request is sent with the OPTIONS method so that the server can respond if it is acceptable to send the request. In this example, we will request permission for these parameters:

The Access-Control-Request-Method header sent in the preflight request tells the server that when the actual request is sent, it will have a POST request method.
The Access-Control-Request-Headers header tells the server that when the actual request is sent, it will have the X-PINGOTHER and Content-Type headers.

ref: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

@gxdvip
Copy link
Author

gxdvip commented Aug 25, 2021

@cs1707 确实应该由后端解决OPTION,但不是必须的,因为preflight可以跳过。
最初用upload组件 上传报错 :
Access to XMLHttpRequest at 'https://dev.ex.com/api/uploadFile' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
而用axios可以上传成功,这可能让人产生困惑。
网上其他解决方案是在before-upload 或 http-request 改用axios。

这个解决方案是简单的在on-progress方法里 return false 即可像axios一样上传成功。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants