Chat feature is not working on Angular app deployed as a container in Azure #7212 | Support Center

abrewer created 5 years ago

Chat feature is not working on Angular app deployed as a container in Azure. The chat icon continues to spin and say "Chat is connecting..." but it never connects.

Go to accepted answer

11 Answer(s)

0

maliming created 5 years ago
Support Team

Can you look at the log information in the browser console?
0

abrewer created 5 years ago

yes. Here is the first error.

Access to XMLHttpRequest at 'https://orcatms.azurewebsites.net//signalr/negotiate?enc_auth_token=wNYmO41%2F48SHNstaLVXxHCCre29BZQl1NhC6NM3R3rzpXtPQxVzH6jEzA%2FQhXFN5tu6Fk7pO53uppm1mVXMZgxbyRVz26dnepi%2FFyB6axBY%2B6gq1GL%2BuRQgoiFUCjRN2p8w6LevViwKlHyWZZJZO1DGVSjAi1m2U%2Bog9pkHw9%2FQR4Nl%2FDPnoP9JYDMpZ1zxx09u6s0GZ9%2FQ5Sjk%2BL0UfcSCbl38X8he5w9UIn%2FHvxh7ysM1CiPLsoOwtbiieSRVmrmt0JjnipAn4%2FK283F8GrGwzwgehWsqefmUnM0ckMwP9ZAdwQxWDhxv0IqNw4tDhwUYs%2F1SYdYozdNzgByhgNOBPzQDObNLlWc4vV5VMOiZU8IpUUl%2BKb9oTnGiJWiHwvPeJL5SC6S935vgJ2Hf61X7Z1oLneUqHPG290BBALgEOYRJACHefCD5qFMi%2BRo5ok2DuwagUBIUqNXljblCC39LjhD%2FXk3s8EymPmac0cjouYS09%2F6ElEyhMpQ5%2BKQl%2Fi1GsaJOEzPcd4yVAQ58gryXct4BfpW2xmU15HQm7t3u2e%2BSVRgvr7y6I3E0CVYaN%2BeEKrvJuAqDKNTm0GoajO4WlYqP6rcuuoCTxHHZnNY1V76bryWOALwlz8ZHDrI%2FurUQww9ZRKRhb6hO%2BP5MA9ZFWC1jSgJmlZKra7vahMZnuRZxZt4TS25pAjR8Uceg8tCyDpRKIVb1nE92hRwnsQ7P3vorfnaSvoBa9Gh8v3Y13NtICTqaCRw0%2B6mrqGK8j0CRZl1sbbCzbEGC3sKSmGcQbI%2Bx9V1MfQang5WlLO0m8cCP3CJqVA9l8tSK0AEcxjZYkYVBme4iCrSs3kXe6hKYlZ%2BVTIt%2BX2pSRQXaDqdWIKeZ015zXZhM2ao%2B7wpyknee6d6KzWzBkHlQHhwZak8cnxddvR0qKErOdcB6BUYVnYQylnX5C4h9AJHHI21gjG397X4WjlTCMteBp6RbAVkQrdlfk7fh81TEaN3g6%2B8I%3D' from origin 'https://orcaui.azurewebsites.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
0

ryancyq created 5 years ago
Support Team

can you share the CORS settings of your application?

abrewer created 5 years ago

yes.

Im running an azure app service with the CORS setting as follows.

Azure App Service CORS Settings
Allowed Origins
https://orcaui.azurewebsites.net
https://orcatms.azurewebsites.net

Then my API backend project has the following settings

    "ServerRootAddress": "https://orcatms.azurewebsites.net",
    "ClientRootAddress": "https://orcaui.azurewebsites.net",
    "CorsOrigins": "https://orcaui.azurewebsites.net,https://orcatms.azurewebsites.net"

0

ismcagdas created 5 years ago
Support Team

Hi @abrewer

What happens you you remove allowed origins from Azure portal and use only the Cors in appsettings.json for *.Host project ?

It seems like having both can cause problems (see https://github.com/aspnet/SignalR/issues/2095)

abrewer created 5 years ago

my ASPNETCORE_ENVIRONMENT is set to "Staging". So i have configured my API project's appsettings.Staging.json to the following.

    "ServerRootAddress": "https://orcatms.azurewebsites.net",
    "ClientRootAddress": "https://orcaui.azurewebsites.net",
    "CorsOrigins": "https://orcaui.azurewebsites.net"

When i remove the CORS setting from azure, and have the above mentioned configuration i get the following error on my site.

    Access to XMLHttpRequest at 'https://orcatms.azurewebsites.net//AbpUserConfiguration/GetAll?d=1562107694929' from origin 'https://orcaui.azurewebsites.net' 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.

abrewer created 5 years ago

I was finially able to get the chat feature to connect by modifiying CORS policy to include ".SetIsOriginAllowed((host)=> true)"

I don't know if this policy make the site more vulnerable to cross scripting attacks though, I will need to research further.

                options.AddPolicy(DefaultCorsPolicyName, builder =>
                {
                    //App:CorsOrigins in appsettings.json can contain more than one address with splitted by comma.
                    builder
                        .WithOrigins(
                            // App:CorsOrigins in appsettings.json can contain more than one address separated by comma.
                            _appConfiguration["App:CorsOrigins"]
                                .Split(",", StringSplitOptions.RemoveEmptyEntries)
                                .Select(o => o.RemovePostFix("/"))
                                .ToArray()
                        )
                        .SetIsOriginAllowedToAllowWildcardSubdomains()
                        .SetIsOriginAllowed((host)=> true)
                        .AllowAnyHeader()
                        .AllowAnyMethod()
                        .AllowCredentials();
                });

0

maliming created 5 years ago
Support Team

Are you sure your application environment is Staging?
0

abrewer created 5 years ago

yes, the logs for the running container have confirmed this.
0

ismcagdas created 5 years ago
Support Team

Hi @abrewer

This (.SetIsOriginAllowed((host)=> true)) enables CORS for all origins, so it might be a vulnerablity problem. You can try to check the value of _appConfiguration["App:CorsOrigins"] to see if it matches the corret app url.
1

bluescopesteel created 5 years ago

We have the same problem here. So I have applied the same solution. ie

.SetIsOriginAllowed((host)=> true)

For now.

Seems to be no better solution described here.

Have an answer to this question? Log in and write your answer.