从 Azure 存储（HTTP 请求）获取 blob 时出错 [VueJs]答案

【问题标题】：Error while get a blob from Azure storage (HTTP request) [VueJs]从 Azure 存储（HTTP 请求）获取 blob 时出错 [VueJs]
【发布时间】：2019-02-08 00:10:50
【问题描述】：

我正在尝试检查 Azure 存储容器中是否存在具有我拥有的路径的 blob。

这是我的要求：

let current_user_img = "https://XXXX.blob.core.windows.net/avatar/" + Img_name + ".png";

const instance = axios.create({
   timeout: 3000,
   headers: {
       "Access-Control-Allow-Origin" : "*",
       "Access-Control-Allow-Methods": "GET,POST,PUT",
       "Access-Control-Allow-Headers": "x-ms-*,content-*",
       "content-type": "application/json",
   }
});
instance .get( current_user_img )
.then(function(response) {
    console.log("User have an avatar.");
    console.log(response);
})
.catch(function(error) {
    console.log("User doesn't have an avatar.");
    console.log(error);
});

我存储的 CORS 如下：

ALLOWED ORIGINS: '*'
ALLOWED METHODS: 'put,get,post'
ALLOWED HEADERS: '*'
EXPOSED HEADERS: '*'
MAX AGE: 0

当我尝试运行代码时，我遇到了这个错误：

Failed to load https://XXXX.blob.core.windows.net/avatar/XXXXXXXX.png: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

我该如何解决？

【问题讨论】：

标签： javascript azure vue.js vuejs2 azure-storage

【解决方案1】：

尝试将 withCredentials: true 属性添加到您的请求中：

const instance = axios.create({
   withCredentials: true,  
   timeout: 3000,     
   headers: {
       "Access-Control-Allow-Origin" : "*",
       "Access-Control-Allow-Methods": "GET,POST,PUT",
       "Access-Control-Allow-Headers": "x-ms-*,content-*",
       "content-type": "application/json",
   }
});

【讨论】：