c# - Azure Bootstrap 字体

Question

似乎无法解决这个问题，我将自定义 Bootstrap css 和字体放入我的 azure cdn，但在 chrome 中我不断得到“来源'http://azxxxxxx.vo.msecnd.net'的字体已被跨域资源共享策略阻止加载:请求的资源上不存在'Access-Control-Allow-Origin' header 。因此不允许来源'http://localhost.domain:16300'访问权限。

我修改了我的 bootstrap css

font-face {
  font-family: 'Glyphicons Halflings';

  src: url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.eot');
  src: url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.woff') format('woff'), url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('//azxxxxxx.vo.msecnd.net/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

我已经阅读了一些 stackoverflow 帖子，将以下内容添加到我的 webconfig

    <httpProtocol>
          <customHeaders>
              <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
 <staticContent>
      <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
    </staticContent>

还有同样的问题，有什么想法吗？

Answer 1

假设您已将字体/CSS 上传到以 Azure CDN 为前端的 Azure 存储。

您需要在存储上启用 CORS 以允许您的站点跨域访问字体。

Windows Azure Storage: Introducing CORS 中涵盖了完整的步骤

本文的部分示例(您需要为最近的 Azure 客户端库获取 NuGet 才能构建它):

private static void InitializeCors()
{
  // CORS should be enabled once at service startup
  // Given a BlobClient, download the current Service Properties 
  ServiceProperties blobServiceProperties = BlobClient.GetServiceProperties();
  ConfigureCors(blobServiceProperties);
  BlobClient.SetServiceProperties(blobServiceProperties);
}

private static void ConfigureCors(ServiceProperties serviceProperties)
{
  serviceProperties.Cors = new CorsProperties();
  serviceProperties.Cors.CorsRules.Add(new CorsRule()
  {
     AllowedHeaders = new List<string>() { "*" },
     AllowedMethods = CorsHttpMethods.Get | CorsHttpMethods.Head,
     AllowedOrigins = new List<string>() { "*" },
     ExposedHeaders = new List<string>() { "*" },
     MaxAgeInSeconds = 1800 // 30 minutes
 });
}