时间戳

首页 > 解决方案 > 从被 CORS 策略阻止的不同域获取 CSS：请求的资源上不存在“Access-Control-Allow-Origin”标头

css - 从被 CORS 策略阻止的不同域获取 CSS：请求的资源上不存在“Access-Control-Allow-Origin”标头

问题描述

我有一个带有一些脚本内容 CSS 等的 RestApi。当我尝试使用 URL 链接从 API 添加 CSS 时，我被 CORS 策略阻止：No 'Access-Control-Allow-Origin' header is present on the requested resource.

这仅在我尝试获取对 a.wolf或.ttf. 喜欢fontasome或flaticon

我的第三方站点 API 已经支持核心，我能够获取脚本和内容，并通过 AJAX 发布和获取，甚至使用信号器（websockets）。

我已经看到您需要添加：Microsoft.AspNet.WebApi.Cors和config.EnableCors(); 但我只是想访问一个文件，而不是一个控制器，所以我不知道还有哪里需要添加它。

这就是我想要获得 css 的方式

<link href="https://myapi/assets/ccs/flaticon.css" rel="stylesheet" type="text/css" />

这是错误：

CORS 策略已阻止https://myapi/assets/ccs/flaticon.woff从源访问字体： 。https://ahotherappNo 'Access-Control-Allow-Origin' header is present on the requested resource

标签： cssscriptingcross-domain

解决方案

首先请阅读这篇跨域资源共享 (CORS)以了解如何与 CORS 共享资源。

CORS 标准通过添加新的 HTTP 标头来工作，这些标头允许服务器向允许的源域提供资源。浏览器支持这些标头并尊重它们建立的限制。

示例：假设您的站点是http://my-cool-site.com ，并且您在域http://third-party-site.com有一个第三方 API ，您可以通过 AJAX 访问该 API。

假设您从 my-cool-site.com 提供的一个页面向第三方站点.com 发出了请求。通常，用户浏览器会根据同源安全策略拒绝对您自己的域/子域以外的任何其他站点的 AJAX 调用。但是如果浏览器和第三方服务器支持 CORS，就会发生以下情况：

  • 浏览器会将以下 HTTP 标头发送到 third-party-site.com

    Origin: http://my-cool-site.com

  • 如果第三方服务器接受来自您的域的请求，它将使用以下 HTTP 标头进行响应：

    Access-Control-Allow-Origin: http://my-cool-site.com

  • 要允许所有域，第三方服务器可以发送此标头：

    Access-Control-Allow-Origin: *

  • 如果您的网站不被允许，浏览器会抛出错误。

如果客户端具有支持 CORS 的相当现代的浏览器，并且您的第三方服务器也支持 CORS，那么您绝对可以对代码进行少量更改。

推荐阅读