首页 新闻 会员 周边

elementui-plus图片跨域问题

0
悬赏园豆:5 [已解决问题] 解决于 2024-05-06 17:10

在使用element-plus的el-image组件时,需要显示外链站点的图片,但是都出现跨域的问题
Access to image ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

但是我直接使用原生的时就可以正常显示
<img :src="item.photo">
请问el-image改怎么处理

灬丶的主页 灬丶 | 初学一级 | 园豆:2
提问于:2024-01-13 16:41
< >
分享
最佳答案
0
收获园豆:5
复制粘贴机器人 | 小虾三级 |园豆:714 | 2024-01-15 08:54
其他回答(1)
0

跨域问题通常是由浏览器的同源策略引起的,当网页上的脚本试图访问与包含它的页面不同域的资源时,浏览器会阻止该请求。原生的<img>标签可能因为某些浏览器的安全策略,更灵活地处理了这个问题。而el-image组件可能会严格遵循同源策略,导致无法显示跨域的图片。

有几种方法可以尝试解决这个问题:

  1. 使用代理服务器
    可以通过设置一个代理服务器,让代理服务器去请求图片,然后将图片传递给你的应用。这样,由于图片请求是从同一域进行的,就不会触发跨域问题。你可以在你的服务器端设置一个代理,或者使用一些已有的代理服务。

html
Copy code
<el-image :src="getProxyUrl(item.photo)"></el-image>
javascript
Copy code
methods: {
getProxyUrl(url) {
// 在这里添加你的代理服务器地址
return https://your-proxy-server.com?url=${encodeURIComponent(url)};
}
}
2. 设置服务器允许跨域
如果你有权限修改图片的服务器,你可以在服务器的响应头中添加 Access-Control-Allow-Origin 头部,允许你的域名访问该资源。

nginx
Copy code
location ~* .(png|jpg|jpeg)$ {
add_header Access-Control-Allow-Origin ;
}
请注意,
表示允许所有域名访问,实际应用中建议根据需要设置具体的允许域名。

  1. 在本地运行时禁用浏览器跨域限制
    在开发环境中,你可以尝试禁用浏览器的跨域限制。例如,使用 Chrome 浏览器时,可以通过在启动时添加 --disable-web-security 参数来禁用跨域限制。请注意,这仅适用于开发环境,不应该在生产中使用。

bash
Copy code
chrome --disable-web-security --user-data-dir
请注意,上述方法可能会导致安全风险,特别是在生产环境中。最好的解决方案是使用第一种或第二种方法,以保持安全性和可维护性。

Technologyforgood | 园豆:6772 (大侠五级) | 2024-01-15 19:55
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册