404 Responses for request in Vite-Vue page deployed on Azure Blob Storage

Question

I deployed my page on Azure blob storage using Azure Storage Extension for VS code (on my project folder i clicking Azure Section -> Storage Accounts ->Blob Conatiners->Deploy to Static Webside via Azure Storage..):

I have such respone for no auth. request:

Content of vite.config.js file:

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/, ''),
      }
    }
  }
})

In dev mode (npm run dev) - is no problem - all requests allow external adress. How to fix it?

Answer 1

The requested content does not exist. HttpStatusCode: 404.

According to this MS-Q&A by Sumarigo-MSFT, the above error code states that the server is unable to locate the resource requested by the client.

1. To resolve the issue, you need to change your access level to either container (anonymous read access for container and blob) or blob (anonymous read access for blobs only).
2. If you access the contents of a static website through the static website endpoint (e.g. account.z5.web.core.windows.net), you don't need to change the ACL of the blob container. The contents should be accessible even if the ACL of $web is set to Private. However, if you access the content through the blob storage endpoint (e.g. account.blob.core.windows.net), then the ACL of the blob container comes into play.

Portal:

Reference:

Here is a reference on how to deploy a static website from Azure blob storage.

Tutorial: Host a static website on Blob storage - Azure Storage | Microsoft Learn