I'm getting CORS issue while accessing font files from another Azure Web App

Vignesh Arvind 26 Reputation points
2020-03-16T05:33:08.31+00:00

Access to font at 'https://example1.azurewebsites.net/css/fonts/font-icons.woff' from origin 'http://example2.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Actually example1.azurewebsite.net has some css, images etc...
i'm trying to use this URL to example2.azurewebsites.net for fetching those files.

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
7,170 questions
0 comments No comments
{count} vote

3 answers

Sort by: Most helpful
  1. SnehaAgrawal-MSFT 19,436 Reputation points
    2020-03-16T07:14:50.267+00:00

    Thanks for asking question! Missing CORS errors occur when there is no access-control-allow-origin header present in responses from separate domains than your root page source. If you're using a .NET application to send the request to your API, add the following to your web.config. You may need to add additional headers such as Access-Control-Allow-Methods and Access-Control-Allow-Headers based on what requests you're making against your API.

      <system.webServer>  
      <httpProtocol>  
        <customHeaders>  
          <add name="Access-Control-Allow-Origin" value="*" />  
        </customHeaders>  
      </httpProtocol>  
    </system.webServer>  
    

    You may refer to this SO issue.

    Some additional links might be helpful: https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1

    1 person found this answer helpful.

  2. Vignesh Arvind 26 Reputation points
    2020-03-16T07:18:59.897+00:00

    @SnehaAgrawal-MSFT

    im using .NET Core as API and Front-End in Angular.....so do i need to add these "Access-Control-Allow-Origin" in the config file of .NET Core ??


  3. Evan Chatter 16 Reputation points
    2021-09-20T07:05:01.157+00:00

    This is happening because of the CORS (Cross Origin Resource Sharing) . For every HTTP request to a domain, the browser attaches any HTTP cookies associated with that domain. This is especially useful for authentication, and setting sessions. You are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.

    JSONP ( JSON with Padding ) is a method commonly used to bypass the cross-domain policies in web browsers. You’re on domain example.com , and you want to make a request to domain example.nett . To do so, you need to cross domain boundaries. JSONP is really a simple trick to overcome the XMLHttpRequest same domain policy. So, instead of using XMLHttpRequest we have to use < script > HTML tags, the ones you usually use to load JavaScript files , in order for JavaScript to get data from another domain.

    Localhost

    If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

    Access-Control-Allow-Origin: http://localhost:9999
    
    0 comments No comments