CODEWITHSUNDEEP
cssscriptingcross-domain
Alejandro Gomez Guerrero
Alejandro Gomez Guerrero

Reputation: 398

Get CSS from different domain blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

I have a RestApi with some scripts contents CSS etc. When I try to add a CSS from the API with the URL link I'm getting blocked by CORS policy:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

This only happens when I try to get a CSS which references to a .wolf or .ttf. like fontasome or flaticon

My third-party-site-api already supports cores, I'm able to get scripts and content, and make post and get by AJAX even working with signalr (websockets).

I have seen that you need to add: Microsoft.AspNet.WebApi.Cors and config.EnableCors(); but I'm just trying to access to a file, not a controller so I don't know where else have to add it.

This is how I want to get the CSS

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

This is the error:

Access to Font at https://myapi/assets/ccs/flaticon.woff from origin https://ahotherapp has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Upvotes: 8

Views: 20701

Answers (2)

Doberon
Doberon

Reputation: 648

put you css at https domain, insiden a php file and add this headers

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: text/css');
?>
.justificado {
    text-align: justify;
    text-justify: inter-word;
}
.centrado {
    text-align: center;
}

And include with

<link rel="stylesheet" href="https://domain/custom_css.php"  crossorigin="anonymous" referrerpolicy="no-referrer" />

Upvotes: 0

Mehdi Yeganeh
Mehdi Yeganeh

Reputation: 2129

First please read this Cross Origin Resource Sharing (CORS) to know how you can share resources with CORS.

The CORS standard works by adding new HTTP headers which allow servers to serve resources to permitted origin domains. Browsers support these headers and respect the restrictions they establish.

Example: Say your site is http://my-cool-site.com and, you have a third party API at domain http://third-party-site.com, which you can access via AJAX.

And let's assume that a page you server from my-cool-site.com made a request to third-party-site.com. Normally, users browser will decline AJAX calls to any other site other than your own domain/subdomain per the Same-Origin Security Policy. But if the browser and the third party server supports CORS, the following things happen:

  • Browser will send the following HTTP header to third-party-site.com

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

  • If the third party server accepts requests from your domain, it will respond with the following HTTP header:

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

  • To allow all domains, third party server can send this header:

    Access-Control-Allow-Origin: *

  • If your site is not allowed, browser will throw an error.

If the client's have fairly modern browsers that support CORS, and your third party server supports CORS as well, you can definitely go for it with minor changes to your code.

Upvotes: 4

Related Questions