Allow backend to accept localhost Blazor Webassemby development #9832

8 Answer(s)

• 

  0

  AI-Bot created 21 days ago

  Support Team ABP Agent

  To allow your backend to accept requests from a locally running Blazor WebAssembly app while your services are deployed (e.g., on Kubernetes), you need to ensure proper CORS configuration in your microservice solution. In ABP 9.2.3, the CORS configuration approach remains similar, but you should also be aware of the X-Frame-Options header, which is set by default for security reasons.

  Here’s how to configure your environment for local Blazor development with minimal impact:

  1. Update CORS Origins in appsettings.json or Helm Chart: Ensure your backend services (especially AuthServer and API gateways) have the following in their configuration:

  "App": {
       "CorsOrigins": "https://localhost:44346,https://your-staging-domain.com"
     }
  

  • You can add multiple origins, separated by commas.
  • Make sure there are no trailing slashes.

  2. Apply CORS Middleware: In your service’s OnApplicationInitialization method, ensure:

  app.UseCors();
  

  This should be before app.UseAuthentication() and app.UseAuthorization().

  3. X-Frame-Options Issue: The error you see (Refused to display ... in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN') is due to the default security headers. If you are embedding the AuthServer in an iframe (e.g., for login), you need to adjust the frame options. In your AuthServer, you can override the default header:

  app.Use(async (context, next) =>
     {
         context.Response.Headers.Remove("X-Frame-Options");
         // Or set to allow from your localhost
         // context.Response.Headers["X-Frame-Options"] = "ALLOW-FROM https://localhost:44346";
         await next();
     });
  

  • Only do this for development; do not allow this in production for security reasons.

  4. Environment-Specific Configuration: Use environment variables or environment-specific appsettings (e.g., appsettings.Development.json) to include localhost only in development.

  5. Restart Services: After updating the configuration, restart your backend services to apply the changes.

  6. Browser Cache: Clear your browser cache or use an incognito window to avoid cached CORS or header responses.

  This setup allows you to run your Blazor WebAssembly app locally and connect to your remote backend securely and conveniently.

  Sources:

  • ABP Microservice CORS Configuration
  • Adding New Microservices (CORS section)

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  maliming created 21 days ago

  Support Team Fullstack Developer

  hi

  These security headers were added by ABP Security Header middleware.

  You can remove all app.UseAbpSecurityHeaders from your apps.

  https://abp.io/docs/latest/framework/ui/mvc-razor-pages/security-headers https://github.com/abpframework/abp/blob/dev/framework/src/Volo.Abp.AspNetCore/Volo/Abp/AspNetCore/Security/AbpSecurityHeadersMiddleware.cs#L42-L43 Thanks.

  Save Cancel
• 

  0

  carl.hallqvist created 20 days ago

  Thanks for fast response :-)

  I was disabling the security headers in the auth-server project.

  

  However, I still get the same error in the browser console: Refused to display 'https://auth.staging.mydomain.com/Error?httpStatusCode=400' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

  In which projects do I need disable the headers, I thought that auth-server is enough?

  Thanks :-)

  Save Cancel
• 

  0

  maliming created 20 days ago

  Support Team Fullstack Developer

  hi

  Can you remove app.UseAbpSecurityHeaders(); from all of your apps?

  Open your solution in VS Code.

  Global search app.UseAbpSecurityHeaders(); in all *.cs files and replace with //app.UseAbpSecurityHeaders();

  Thanks.

  Save Cancel
• 

  0

  carl.hallqvist created 18 days ago

  Thanks,

  I could just see 4 instances of app.UseAbpSecurityHeaders();, but in identity and administration it was already commented out (from the.ABP 9.2.3 generator).

  However, I was commented public web and authserver, unfortunately with no success.

  Looking in the logs for authserver and got this one:

  "private_key_jwt",
      "client_secret_basic"
    ],
    "require_pushed_authorization_requests": false,
    "claims_parameter_supported": false,
    "request_parameter_supported": false,
    "request_uri_parameter_supported": false,
    "tls_client_certificate_bound_access_tokens": false,
    "authorization_response_iss_parameter_supported": true
  }.
  [19:53:57 INF] Request finished HTTP/1.1 GET http://auth.staging.mydomain.com/.well-known/openid-configuration - 200 2942 application/json;charset=UTF-8 242.444ms
  [19:53:57 INF] Request starting HTTP/1.1 GET http://auth.staging.mydomain.com/connect/authorize?client_id=Blazor&redirect_uri=https%3A%2F%2Flocalhost%3A44346%2Fauthentication%2Flogin-callback&response_type=code&scope=openid%20profile%20roles%20email%20phone%20AuthServer%20IdentityService%20AdministrationService%20CustomerService%20DocumentService%20TicketService%20InvoiceService%20SaasService%20AuditLoggingService%20GdprService%20ChatService&state=f324eee679f54369affac890a1d21fb2&code_challenge=0PcnlBsXiA2TI_vmnDrwGA-fAh35nP5irdgN_U2CnOY&code_challenge_method=S256&prompt=none&response_mode=query - null null
  [19:53:57 WRN] Unknown proxy: [::ffff:10.244.1.23]:44548
  [19:53:57 INF] The request URI matched a server endpoint: Authorization.
  [19:53:57 INF] The authorization request was successfully extracted: {
    "client_id": "Blazor",
    "redirect_uri": "https://localhost:44346/authentication/login-callback",
    "response_type": "code",
    "scope": "openid profile roles email phone AuthServer IdentityService AdministrationService CustomerService DocumentService TicketService InvoiceService SaasService AuditLoggingService GdprService ChatService",
    "state": "f324eee679f54369affac890a1d21fb2",
    "code_challenge": "0PcnlBsXiA2TI_vmnDrwGA-fAh35nP5irdgN_U2CnOY",
    "code_challenge_method": "S256",
    "prompt": "none",
    "response_mode": "query"
  }.
  [19:53:57 INF] Client validation failed because 'https://localhost:44346/authentication/login-callback' was not a valid redirect_uri for Blazor.
  [19:53:57 INF] The authorization request was rejected because the redirect_uri was invalid: 'https://localhost:44346/authentication/login-callback'.
  

  Guess I have to append the redirectUris in services/identity/MyApplication.IdentityService/Data/OpenIddictDataSeeder.cs . But could that trigger the X-Frame-Options' to 'SAMEORIGIN'.?

  Save Cancel
• 

  0

  maliming created 18 days ago

  Support Team Fullstack Developer

  hi

  The Client validation failed error has nothing to do with X-Frame-Options'.

  You can add https://localhost:44346/authentication/login-callback as your client redirect_uri

  Thanks.

  Save Cancel
• 

  0

  carl.hallqvist created 16 days ago

  Thanks! Once I added the redirect uri and in the openiddictseeder the problem with the X frame options was gone. So everything works very good now! Thank for good support!

  Save Cancel
• 

  0

  maliming created 15 days ago

  Support Team Fullstack Developer

  Great

  Save Cancel