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改怎么处理
最佳答案
0
其他回答(1)
0
跨域问题通常是由浏览器的同源策略引起的，当网页上的脚本试图访问与包含它的页面不同域的资源时，浏览器会阻止该请求。原生的<img>标签可能因为某些浏览器的安全策略，更灵活地处理了这个问题。而el-image组件可能会严格遵循同源策略，导致无法显示跨域的图片。
有几种方法可以尝试解决这个问题：
- 使用代理服务器
可以通过设置一个代理服务器，让代理服务器去请求图片，然后将图片传递给你的应用。这样，由于图片请求是从同一域进行的，就不会触发跨域问题。你可以在你的服务器端设置一个代理，或者使用一些已有的代理服务。
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 ;
}
请注意，表示允许所有域名访问，实际应用中建议根据需要设置具体的允许域名。
- 在本地运行时禁用浏览器跨域限制
在开发环境中，你可以尝试禁用浏览器的跨域限制。例如，使用 Chrome 浏览器时，可以通过在启动时添加 --disable-web-security 参数来禁用跨域限制。请注意，这仅适用于开发环境，不应该在生产中使用。
bash
Copy code
chrome --disable-web-security --user-data-dir
请注意，上述方法可能会导致安全风险，特别是在生产环境中。最好的解决方案是使用第一种或第二种方法，以保持安全性和可维护性。
