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.

Sign up for GitHub

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

Jump to bottom

[Component] [image] Image 跨域问题 #15468

Closed
besscroft opened this issue Jan 11, 2024 · 11 comments · Fixed by #15511
Closed

[Component] [image] Image 跨域问题 #15468

besscroft opened this issue Jan 11, 2024 · 11 comments · Fixed by #15511
Labels
Component::Image has workaround

Comments

@besscroft
Copy link
Contributor

Bug Type: Component

Environment

  • Vue Version: 3.4.3
  • Element Plus Version: 2.5.1
  • Browser / OS: Chrome/120.0.6099.216
  • Build Tool: Nuxt

Reproduction

Related Component

  • el-image

Reproduction Link

Github Repo

Steps to reproduce

我把 element-plus 从 2.4.4 升级到 2.5.1 之后出现的问题，然后查看 releases 发现，新增了 crossorigin 属性。我单独对 crossorigin 和 referrerpolicy 属性，以及同时使用的各种值的排列组合进行了测试，依旧会出现跨域问题，所以来求助看看。项目中使用其他方式而非 el-image 的图片能够正常加载。

谢谢！

What is Expected?

图片正常加载

What is actually happening?

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Additional comments

(empty)
@Cheerwhy
Copy link
Contributor

Cheerwhy commented Jan 11, 2024 •
edited
Loading

试试看, 移除crossorigin

<el-image :crossorigin="null" />

@besscroft
Copy link
Contributor Author

@Cheerwhy 感谢你的回复，设置为 null 可以了。

@xiaoxian521
Copy link
Member

试试看, 移除crossorigin

<el-image :crossorigin="null" />

可以将这个说明加到image文档的crossorigin属性上，欢迎pr❤️

@besscroft
Copy link
Contributor Author

谢谢，我在 docs 上添加了 null type。
#15471

@xiaoxian521
Copy link
Member

我注意到文档上有个空字符串 或许设置空字符串也可以呢
image

@kooriookami
Copy link
Member

kooriookami commented Jan 12, 2024 •
edited
Loading

crossorigin 不要设置默认值，然后只保留 anonymous、use-credentials、空字符串 三个选项。之前的改动确实会有影响。

@kooriookami
Copy link
Member

Fixed

@KuAi9
Copy link

KuAi9 commented Jan 14, 2024

crossorigin 不要设置默认值，然后只保留 anonymous、use-credentials、空字符串 三个选项。之前的改动确实会有影响。

通过设置 el-image 的 crossorigin 为 null 解决跨域，但是会有TS类型错误，而且 el-image-viewer 仍然跨域

@li-wanbin
Copy link

我也遇到了这个问题，el-image-viewer 仍然跨域

kooriookami added a commit that referenced this issue Jan 15, 2024
@kooriookami
fix(components): [image-viewer] Fix crossorigin
f116504 
closed #15468
@kooriookami kooriookami mentioned this issue Jan 15, 2024
Merged
3 tasks
kooriookami added a commit that referenced this issue Jan 15, 2024
@kooriookami
fix(components): [image-viewer] Fix crossorigin (#15511)
f60db10 
* fix(components): [image-viewer] Fix crossorigin

closed #15468

* fix(components): update
@liu-kuan
Copy link

liu-kuan commented Jan 17, 2024 •
edited
Loading

之前 el-image 好好的，就是新版本加上 crossorigin 之后所有图片都产生了跨域问题，感觉以后官方维护者代码合并的审查需要更认真一点

@github-actions GitHub Actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

此 issue 已被自动锁定，因为关闭后没有任何近期活动。如果有相关 bug，请重新创建一个新 issue。

@github-actions github-actions bot locked and limited conversation to collaborators Feb 16, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Component::Image has workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(components): [image-viewer] Fix crossorigin element-plus/element-plus
7 participants
@besscroft @kooriookami @xiaoxian521 @li-wanbin @KuAi9 @Cheerwhy @liu-kuan