问题描述
我想从 vue-file-pond 中的 s3 加载初始图像,但它向 s3 发送了 Xhr 请求并且被 cors 源策略阻止。 (我不使用服务器端选项,因为我通过表单提交图像。)。 这是我的文件池标签
<file-pond
style="width: 100px; height: 100px"
name="image"
ref="image"
label-idle="Drop files here or <span class='filepond--label-action'>browse</span>"
:allow-multiple="false"
accepted-file-types="image/*"
style-panel-layout="compact circle"
image-preview-height="70"
image-crop-aspect-ratio="1:1"
image-resize-target-width="100"
image-resize-target-height="100"
@removefile="removefile(category.image,'image')"
@addfile="addImage"
v-bind:files="image"
/>
---------------------------------
data(){return{
image: this.category.image
? [this.storage_url + this.category.image]
: "",}
},methods:{
addImage() {
this.form.image = this.$refs.image.getFile().file;
},}
storage_url 是我的 s3 基本 URL。 它只是加载在 img 标签上,但在文件池中...... 我能做什么?我做了整整一周的噩梦
解决方法
对于谁可能会与此问题混淆: 终于过了一个星期,我想通了。这是因为浏览器缓存。当 s3 URL 在 img 标签中加载时,浏览器将其缓存,而在 XHR 请求中的另一次,它并没有真正像正常请求那样请求。所以我强迫他们不缓存:) 请参阅此 StackOverFlow 问题