javascript - 403（未启用 CORS 或未找到此请求的匹配规则。）[VueJs]

Question

我正在使用 HTTP 请求将图像上传到 Azure 存储，当存储帐户的 CORS 通用时，它对我有用，例如：

allowed origins: *
allowed methods: 7 selected (which all options)
allowed headers: *
exposed headers: *
max age: 0

在我的 Http 请求中（唱 axios）：

headers: {
     "Access-Control-Allow-Origin" : "*",
     "Access-Control-Allow-Methods": "*",
     "Access-Control-Allow-Headers": "*",
     "Content-Type": "image/png",
     "x-ms-date": currentDate,
     "x-ms-version": ""2017-11-09"",
     "x-ms-blob-type": "BlockBlob",
}

它适用于我并上传了图像，但是当我修改 CORS 以添加一些约束时，它不起作用。例如：

allowed origins: https://XXXXXXXX.blob.core.windows.net/
allowed methods: 7 selected (which all options)
allowed headers: Authorization,x-ms-*
exposed headers: x-ms-meta-*
max age: 3600

在我的 HTTP 请求中（唱 axios）：

headers: {
     "Access-Control-Allow-Origin" : "https://XXXXXXXX.blob.core.windows.net/",
     "Access-Control-Allow-Methods": "PUT,GET,PATCH,POST,HEAD,DELETE,MERGE,OPTIONS",
     "Access-Control-Allow-Headers": "Authorization,x-ms-*,content-*",
     "Content-Type": "image/png",
     "x-ms-date": currentDate,
     "x-ms-version": ""2017-11-09"",
     "x-ms-blob-type": "BlockBlob",
}

我遇到了两条错误消息：

选项 https://XXXXXXXXXX.blob.core.windows.net/user-avatar/XXXXXXXXXXXXXXXXXXXXXXXX 403（CORS 未启用或未找到此请求的匹配规则。）

无法加载 https://XXXXXXXXXX.blob.core.windows.net/user-avatar/XXXXXXXXXXXXXXXXXXXXXXXX：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源。因此不允许访问源“ http://localhost:8080 ”。

我应该如何解决问题？

标签： javascriptvue.jsvuejs2

Answer 1

更改此行

"Access-Control-Allow-Origin" : "https://XXXXXXXX.blob.core.windows.net/",

至

"Access-Control-Allow-Origin" : "localhost:8080/",

看看 CORS - 如何“预检”httprequest？