CORS error when redirect in Azure B2C

Question

Hi!

we have an Azure B2C tenant with custom policies and we are facing a problem. We have a portal web where in some sites there are sensitive information that only logged users should se so we want that when user go to this site automatically redirect to Azure B2C for log in but the redirect is not working and its showing this error:

Access to XMLHttpRequest at 'https://XXXXXXXXX.b2clogin.com/XXXXXXXXXX.onmicrosoft.com/oauth2/v2.0/authorize?p=B2C_1A_SIGNUP_SIGNIN&client_id=c94c14cd-4efc-4c34-a70b-f88e9aa5877b&redirect_uri=https://XXXXXXXXX/XXX/XX/inici.html&scope=openid%20offline_access&response_type=code&promt=login&response_mode=query&ui_locales=ca&origin=https://XXXXXXX/XXX/XX/XXXXX/XXXXXX?eventId=a0da3b0e-90e2-4b8a-95ca-f50654ec9bd6&languageId=51d9383e-1039-ed11-9db1-00224899347c' (redirected from 'https://XXXXXXXXX/XXXXX/XXXXXX/XXXX/XXXXX/XXXXXXXX/jcr:content.user-info.json?eventId=a0da3b0e-90e2-4b8a-95ca-f50654ec9bd6&languageId=51d9383e-1039-ed11-9db1-00224899347c') from origin 'https://XXXXXXXX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

We have set the redirect URI in SPA but this is not solving the issue.

Regards.

Answer 1

Hi Alejandro Miranda,

It looks like you're encountering a CORS (Cross-Origin Resource Sharing) error when trying to redirect to Azure B2C for login. This issue typically occurs when the browser blocks requests to a different origin due to missing CORS headers. Here are some steps to help you resolve this issue:

Steps to Resolve CORS Error in Azure B2C

1. Configure CORS in Azure B2C

Ensure that your Azure B2C tenant is configured to allow requests from your web application's origin. You can do this by adding the allowed origins in the Azure portal.

1. Navigate to Azure B2C:
   • Go to the Azure portal.
   • Navigate to Azure AD B2C.
2. Configure CORS:
   • Go to User flows or Custom policies.
   • Select the policy you are using (e.g., B2C_1A_SIGNUP_SIGNIN).
   • Under API connectors, configure the allowed origins by adding your web application's URL.

2. Set Up Redirect URI Correctly

Ensure that the redirect URI is correctly set up in your single-page application (SPA) registration in Azure B2C.

1. Register the SPA:
   • In the Azure portal, navigate to Azure AD B2C > App registrations.
   • Select your SPA application or create a new one.
   • Under Redirect URI, select Single-page application (SPA) and enter your application's URL (e.g., https://yourapp.com/callback).
2. Enable Implicit Grant Flow:
   • Under Authentication, ensure that ID tokens and Access tokens are enabled for the implicit grant flow.

3. Handle CORS in Your Application

Ensure that your application is correctly handling CORS requests. You may need to configure your server to include the Access-Control-Allow-Origin header in the response.

1. Example Configuration for Node.js:

      const express = require('express');
      const cors = require('cors');
      const app = express();
      app.use(cors({
          origin: 'https://yourapp.com',
          methods: ['GET', 'POST'],
          allowedHeaders: ['Content-Type', 'Authorization']
      }));
      app.listen(3000, () => {
          console.log('Server running on port 3000');
      });
   

Additional Resources

• Configure CORS in Azure AD B2C

I hope these steps help you resolve the CORS error and successfully redirect users to Azure B2C for authentication. If you need further assistance, feel free to ask. Good luck!

Best regards,
Jonathan

---

Your feedback is very important to us! If this answer resolved your query, please click 'YES'. This helps us continuously improve the quality and relevance of our solutions. Thank you for your cooperation!