locked
CORS Issue RRS feed

  • Question

  • User-137472927 posted

    Hi All,

    I have a standard C# WebAPI project whose operations are getting called from Angular client application. This C# WebAPI application has CORS enabled on it. I am receiving the below error on entering the client application URL in browser:

    Access to XMLHttpRequest at 'https://applicationservice.abc.com/api/AppToken/AbcIndex' from origin 'https://smartstore.abc.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    I have verified that URL 'https://smartstore.abc.com' is present in <outboundrules> in web.config of WebAPI application  

    <outboundRules>
            <clear />
            <rule name="AddCrossDomainHeader">
              <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
              <conditions logicalGrouping="MatchAll" trackAllCaptures="true">

    </conditions></rule></outboundrules>

    Please suggest how can I resolve this issue ASAP.

    Regards,

    Pratham

    Wednesday, January 20, 2021 5:19 PM

All replies

  • User475983607 posted

    Please suggest how can I resolve this issue ASAP.

    The quickest method is basic troubleshooting using the standard tools to debug your code.  Open the browser's dev tools and review the request that caused the issue.  Often the problem is the OPTIONS HTTP request is not CORS enabled or there is an error returned by Web API.

    Should we assume this is ASP.NET Web API and not Core?

    Reference

    https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

    Wednesday, January 20, 2021 6:20 PM
  • User1686398519 posted

    Hi jainpratham27, 

    whose operations are getting called from Angular client application.

    For Angular applications, you can enable CORS through proxy configuration. You need to generate a src/proxy.conf.json file in the Angular root folder and put the following code in it.

    You can click this link to see the solution.

    {
        "/api/*": {
            "target": "http://localhost:xxxxx",
            "secure": false,
            "logLevel": "debug"
        }
    }

    Best Regards,

    YihuiSun

    Thursday, January 21, 2021 6:30 AM
  • User-137472927 posted

    Hi mgeBhard,

    Thanks for your quick reply! Yes, this is ASP.NET Web API project and not Core application.

    Regards,

    Pratham

      

    Thursday, January 21, 2021 9:26 AM
  • User-137472927 posted

    Hi All,

    The exact CORS error I am receiving from C# WebAPI application is:

    Access to XMLHttpRequest at 'https://applicationservice.abc.com/api/ApplicationToken/ABCIndex' from origin 'https://smartstore.abc.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

    Regards,

    Pratham

    Thursday, January 21, 2021 11:02 AM
  • User475983607 posted

    Yeah, we know the error and see folks with the error often on the forums.  You are not the first or the last.  Again, two most common issues are bugs in the action that cause an exception or an OPTIONS response that is not CORS enabled.  this assumes you actually configure CORS on the Web API application.

    I provided a link in my first post which covers configuration as well as how to handle the OPTIONS request.  It is not clear if you read the link.

    If your Web API design is throwing an exception then you must fix the bug in your code.  Use dev tools to view the request/response.  If there is an error the response will contain the error message.  

    Thursday, January 21, 2021 12:25 PM