404 对部署在 Azure Blob 存储上的 Vite-Vue 页面中的请求的响应

Question

我使用 VS 代码的 Azure 存储扩展在 Azure Blob 存储上部署了我的页面（在我的项目文件夹中，我单击 Azure 部分 -> 存储帐户 -> Blob Conatiners -> 通过 Azure 存储部署到静态 Webside..）：

我这样的回应是未经授权的。要求：

vite.config.js文件内容：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
  ],
  build: {
    cssCodeSplit: false,
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'https://wo****i.azurewebsites.net',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    }
  }
})

在开发模式下（npm run dev） - 没问题 - 所有请求都允许外部地址。怎么解决？

Answer 1

请求的内容不存在。 HttpStatusCode：404。

根据 Sumarigo-MSFT 的 MS-Q&A，上述错误代码表明服务器无法找到客户端请求的资源。

1. 要解决此问题，您需要将访问级别更改为容器（容器和 Blob 的匿名读取访问权限）或 Blob（仅 Blob 的匿名读取访问权限）。
2. 如果您通过静态网站端点（例如 account.z5.web.core.windows.net）访问静态网站的内容，则无需更改 Blob 容器的 ACL。即使 $web 的 ACL 设置为 Private，内容也应该可以访问。但是，如果您通过 Blob 存储端点（例如 account.blob.core.windows.net）访问内容，则 Blob 容器的 ACL 就会发挥作用。[](

传送门：

参考：

这里是有关如何从 Azure Blob 存储部署静态网站的参考。

教程：在 Blob 存储上托管静态网站 - Azure 存储 |微软学习