Base solution for your next web application
Open Closed

Angular 2 Azure SignalR #3283


User avatar
0
michaelhilgers created

Hi,

I published my angular 2 application to azure and its working only the chat doesn't work. If I look inside the console I get the following error:

XMLHttpRequest cannot load https://pm.host.ligna-systems.com/signalr/negotiate?clientProtocol=1.5&enc_…22abpcommonhub%22%7D%2C%7B%22name%22%3A%22chathub%22%7D%5D&_=1496057630510. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'https://parts.pm.ligna-systems.com' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

On my asp. core project (Abp v. 1.5.0) my webconfig looks like this :

<?xml version="1.0" encoding="utf-8"?>
<configuration>

   

   <system.webServer>
       <rewrite>
         <rules>
            
            <rule name="Force HTTPS" enabled="true">
               <match url="(.*)" ignoreCase="false" />
               <conditions>
                  <add input="{HTTPS}" pattern="off" />
               </conditions>
               <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" appendQueryString="true" redirectType="Permanent" />
            </rule>
            
         </rules>
      </rewrite>
      
      <httpProtocol>
         <customHeaders>
            <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Abp.TenantId, Authorization" />
         </customHeaders>
      </httpProtocol>

      <handlers>
         <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified"/>
      </handlers>

      <aspNetCore processPath="%LAUNCHER_PATH%" arguments="%LAUNCHER_ARGS%" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="false"/>

      <modules>
         <remove name="WebDAVModule" />
      </modules>

   </system.webServer>
</configuration>

and on Azure I configured cors with a '*'.

Could you help my please ?


7 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Can you try to remove CORS setting on azure and configure it via config file in your deployed host project ?

    Thanks.

  • User Avatar
    0
    michaelhilgers created

    Hi,

    I tried to configure cors on the web config. I removed the '*' in the CORS settings from azure so there isn't any configuration. I changed the web.config and now I get the following error :

    XMLHttpRequest cannot load <a class="postlink" href="https://pm-host.ligna-systems.com/signalr/negotiate?clientProtocol=1.5&enc_">https://pm-host.ligna-systems.com/signa ... l=1.5&enc_</a>…22abpcommonhub%22%7D%2C%7B%22name%22%3A%22chathub%22%7D%5D&_=1496148093643. The 'Access-Control-Allow-Origin' header contains multiple values 'https://pm-parts.ligna-systems.com, *', but only one is allowed. Origin 'https://pm-parts.ligna-systems.com' is therefore not allowed access.

    This is my current web.config File, I put '*' on the 'Access-Control-Allow-Origin' property

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      
      <system.webServer>
        
        <rewrite>
          <rules>
            <rule name="Force HTTPS" enabled="true">
              <match url="(.*)" ignoreCase="false" />
              <conditions>
                <add input="{HTTPS}" pattern="off" />
              </conditions>
              <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" appendQueryString="true" redirectType="Permanent" />
            </rule>
          </rules>
        </rewrite>
        
        <httpProtocol>
             <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, HEAD, OPTIONS" />
                <add name="Access-Control-Allow-Credentials" value="true"/>
                <add name="Access-Control-Allow-Headers" value="X-Requested-With, origin, content-type, accept, Abp.TenantId, Authorization" />
             </customHeaders>
          </httpProtocol>
        <handlers>
          <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" />
        </handlers>
        <aspNetCore processPath=".\LignaSystems.PM.Web.Host.exe" arguments="" stdoutLogEnabled="false" stdoutLogFile="\\?\%home%\LogFiles\stdout" forwardWindowsAuthToken="false" />
        <modules>
          <remove name="WebDAVModule" />
        </modules>
      </system.webServer>
    </configuration>
    
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @MichaelHilgers,

    The cors configuration should be in appsettings.json file in your host project, can you cehck that ?

    Thanks.

  • User Avatar
    0
    michaelhilgers created

    Hi,

    Have you got some example for an configuration in the appsettings ? I don't have any experience with cors.

    Thanks !

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    I'm talking about this setting <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/dev/aspnet-core/src/MyCompanyName.AbpZeroTemplate.Web.Host/appsettings.json#L16">https://github.com/aspnetzero/aspnet-ze ... s.json#L16</a>.

    When you set an url for this setting, cors should be enabled and that url should be allowed.

    Thanks.

  • User Avatar
    0
    michaelhilgers created

    Hi,

    I added the CorsOrigins to the appsettings, but I need also to apply the following changes

    <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/issues/76">https://github.com/aspnetzero/aspnet-ze ... /issues/76</a>

    After I did this change It works but I can't use my Tenancy_Name placeholder in the CorsOrigins property so I have to add every subdomain in the corsorigings property.

    "App": {
        "WebSiteRootAddress": "https://pm-{TENANCY_NAME}.myDomain.com/",
        "CorsOrigins": "https://pm-Tenancy1.myDomain.com,https://pm-Tenancy2.myDomain.com,https://pm-Tenancy3.myDomain.com,https://pm.myDomain.com,https://pm-host.myDomain.com"
      },
    

    And finally it work.

    Thank you very much for your help ! :)

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    After I did this change It works but I can't use my Tenancy_Name placeholder in the CorsOrigins property so I have to add every subdomain in the corsorigings property.

    Yes, we know this problem and we will try to solve it for the next releases.

    Thanks.