Strapi blod storage

最近给strapi配置了 blod storage:

yarn add strapi-provider-upload-azure-storage

.env添加：

STORAGE_ACCOUNT=XXX
STORAGE_ACCOUNT_KEY=XXX
STORAGE_CONTAINER_NAME=XXX

plugins.ts

module.exports = function({ env }) {
  return {
    upload: {
      config: {
        provider: "strapi-provider-upload-azure-storage",
        providerOptions: {
          account: env("STORAGE_ACCOUNT"),
          accountKey: env("STORAGE_ACCOUNT_KEY"),
          containerName: env("STORAGE_CONTAINER_NAME"),
          defaultPath: "assets",
        },
      },
    },
  };
};

然后在strapi admin page访问文件或者图片，会出现：

Access to video at
‘https://XXXX/assets/Canada_20_Nova_20_Scotia_20rusted_20chain_20links_20zoom_20in_preview_b40e3f062c.mp4’
from origin ‘http://localhost:1337’ has been blocked by CORS policy:
No ‘Access-Control-Allow-Origin’ header is present on the requested
resource.

可以修改config/middlewares.ts里面的’strapi::security’ , 如果你是用aws或者ali的storage, 后面改对应的域名应该也是一样的。

{
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:',"http"],
          'img-src': ["'self'", 'data:', 'blob:', 'https://'+env('STORAGE_ACCOUNT')+'.blob.core.windows.net'],
          'media-src': ["'self'", 'data:', 'blob:', 'https://'+env('STORAGE_ACCOUNT')+'.blob.core.windows.net'],
          upgradeInsecureRequests: null,
        },
      },
    },
  },