Why CORS errors in API call by React App hosted in Azure AppService once after applying domain redirection rules in we.config file of the react app

Question

Why CORS errors in API call by React App hosted in Azure AppService once after applying domain redirection rules in we.config file of the react app

Developer 0

Root domain Redirection rules in config file causing the issue to redirect wildcard domains giving CORS Errors. the below rules has been applied but getting CORS errors in while calling wilcard domains in React app hosted on to Azure AppService. below is the rewrite rules in web.config file of ReactApp hosted in AppService.

Lex Li (Microsoft) 6,037 Reputation points Microsoft Employee

2024-01-29T17:59:55.4266667+00:00

You showed your front end configuration, which is typical for a React web app. What about the back end API? Can you edit the question and show some details?

Developer 0

Hi Lex, In back end API CORS policy is as below.

services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy",
                    builder => builder.AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader());

            });

In react app config file URL rewrite rules are as below:

<rewrite>
    <rules>
        <!-- Redirect main website to www -->
        <rule name="Redirect to www" stopProcessing="true">
            <match url=".*" />
            <conditions>
                <add input="{HTTP_HOST}" pattern="^kibsons\.com$" />
            </conditions>
            <action type="Redirect" url="http://www.kibsons.com/{R:0}" redirectType="Permanent" />
        </rule>

        <!-- React Routes rule-->
        <rule name="React Routes" stopProcessing="true">
            <match url=".*" />
			
            <conditions logicalGrouping="MatchAll">
			
            <!-- API Condition -->
			<add input="{REQUEST_URI}" pattern="/MyAPI/.*" negate="true" />
            <!-- ... -->
					
			<!-- other conditions -->
			
            <!-- ... -->
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="./index.html" />
        </rule>

This rewrite condition is for the backend API

   <!-- API Condition -->			
<add input="{REQUEST_URI}" pattern="/MyAPI/.*" negate="true" />            
   <!-- ... -->

Grmacjon-MSFT 19,151 Reputation points Moderator

2024-02-08T03:14:24.5+00:00

Hi @Developer Thanks for the additional info about your web app. We are looking into this issue and will get back to you shortly Best,

Grace
Grmacjon-MSFT 19,151 Reputation points Moderator

2024-02-21T00:22:23.6033333+00:00

Hello @Developer It looks like this issue require deeper investigation. Could you please send us an email to AzCommunity[at]Microsoft[dot]com with the below details, so that we can enable a one-time-free support for you to work closely on this issue?

Email subject: <Attn - Grace >

Thread URL: <Microsoft Q&A Thread>

Subscription ID: <your Azure subscription id>

Please let me know here once the email is sent along with above requested details.

Thanks,

Grace
Grmacjon-MSFT 19,151 Reputation points Moderator

2024-03-02T21:01:06.51+00:00

@Developer we didn't receive an email from you. just checking to see if you're still facing this issue

1 answer

Your answer

Lex Li (Microsoft) 6,037 Reputation points Microsoft Employee

2024-01-29T17:59:55.4266667+00:00

You showed your front end configuration, which is typical for a React web app. What about the back end API? Can you edit the question and show some details?
Developer 0 Reputation points

2024-01-30T06:16:54.43+00:00

Hi Lex, In back end API CORS policy is as below.

services.AddCors(options => { options.AddPolicy("CorsPolicy", builder => builder.AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader()); });

In react app config file URL rewrite rules are as below:

<rewrite> <rules>  <rule name="Redirect to www" stopProcessing="true"> <match url=".*" /> <conditions> <add input="{HTTP_HOST}" pattern="^kibsons\.com$" /> </conditions> <action type="Redirect" url="http://www.kibsons.com/{R:0}" redirectType="Permanent" /> </rule>  <rule name="React Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll">  <add input="{REQUEST_URI}" pattern="/MyAPI/.*" negate="true" />    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="./index.html" /> </rule>

This rewrite condition is for the backend API

 <add input="{REQUEST_URI}" pattern="/MyAPI/.*" negate="true" /> 
Grmacjon-MSFT 19,151 Reputation points Moderator

2024-02-08T03:14:24.5+00:00

Hi @Developer Thanks for the additional info about your web app. We are looking into this issue and will get back to you shortly Best,

Grace
Grmacjon-MSFT 19,151 Reputation points Moderator

2024-02-21T00:22:23.6033333+00:00

Hello @Developer It looks like this issue require deeper investigation. Could you please send us an email to AzCommunity[at]Microsoft[dot]com with the below details, so that we can enable a one-time-free support for you to work closely on this issue?

Email subject: <Attn - Grace >

Thread URL: <Microsoft Q&A Thread>

Subscription ID: <your Azure subscription id>

Please let me know here once the email is sent along with above requested details.

Thanks,

Grace
Grmacjon-MSFT 19,151 Reputation points Moderator

2024-03-02T21:01:06.51+00:00

@Developer we didn't receive an email from you. just checking to see if you're still facing this issue

Answer 1

Saravanan Ganesan 1,830 MVP

Hi ,

The CORS errors in your React app, hosted in Azure AppService, may be caused by the root domain redirection rules. When redirecting wildcard domains, CORS issues can arise. To resolve this, ensure that your CORS policy allows requests from all relevant domains. Additionally, validate that the server responds with appropriate CORS headers. Review your CORS configuration and adjust it to accommodate both the root and wildcard domains. Testing with wildcard domains in different environments can help identify and address any specific CORS-related challenges. Regards , Saravanan Ganesan.

Developer 0 Reputation points

2024-01-30T05:23:17.79+00:00
CORS Policy has been configure to allow for any origin in the application code as below:

services.AddCors(options => { options.AddPolicy("CorsPolicy", builder => builder.AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader()); });

is there any another approach to configure the CORS policy to allow cross origin. I have front end as react and backend as .net Core API, these both has been hosted under common Azure AppService. the above configuration hsa been done into the API code
Developer 0 Reputation points

2024-02-08T05:40:08.9766667+00:00

Hi Saravanan, Is there any workaround into the applied solution or please share your valuable technical advice to get resolved this issue?

Share via

Why CORS errors in API call by React App hosted in Azure AppService once after applying domain redirection rules in we.config file of the react app

1 answer

Your answer