Azure - Angular js front end and .net backend getting CORS error Response to preflight request. Also no page is getting after login

RajaShekar
May 23, 2022
51 views
1 vote
2 Answers

He have deployed two apps

Frontend: Angular.js (UI)
Backend: .Net framework (API)

We executed from azure pipeline and deployed to IIS. No error application deployed. We have linked in api in config.js file

test_app = {
  environment: "prod",
  apiUrls: {
    mr: "https://new-mr-api.xxx.com/api",
    sites: "https://sitesapi.xxx.com/api",
  },
  azureAD: {
    clientId: "xxxxxxxxxxxxxxx",
    loginAuthorityPolicyName: "B2C_1A_MR_SignUp_SignIn_AAD",
    passwordResetPolicyName: "B2C_1A_MR_PasswordReset",
    tenantName: "cappartners",
    appIds: {
      mr: "mr-test",
      sites: "apis",
    },
  },
  powerBI: {
    workspaceId: "yyyyyyyyyyyyyyyy",
    dockOrderStatusId: "7rrrrrrrrrrrrrrrrrrrrrrrrr",
  },
  applicationInsights: {
    instrumentationKey: "1111111111111111111111111111111",
    roleName: "Browser",
    roleInstance: "PROD",
  },
  googleMapsApiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
};

Here in mr we provided API url. Also added b2c url for login
So when we hit the UI url http://new-mr.xxx.com then we are getting login microsoft azure b2c login page. After login nothing is displaying. When we check in developer/inspect page console we are getting CORS blocked error

we have added CORS in api webapiconfig.js like

using System.Web.Http.Cors
...........
so on...

string origins = ConfigurationManager.AppSettings["cors:origins"];
string headers = ConfigurationManager.AppSettings["cors:headers"];
string methods = ConfigurationManager.AppSettings["cors:methods"];
var cors = new EnableCorsAttribute(origins, headers, methods, "API-Build-Number");
config.EnableCors(cors);
config.MapHttpAttributeRoutes();
.............. so on....

Also added cors in Web.config

<add key="cors:origins" value="*" />
<!--<add key="cors:headers" value="Origin, X-Requested-With, Content-Type, Accept, Authentication" />
<add key="cors:methods" value="GET, POST PUT, PATCH, DELETE, OPTIONS" />-->
<add key="cors:headers" value="*" />
<add key="cors:methods" value="*" />

Please help in loading the page and resolving the error. Thanks in advance

Answers

- kavyaS
- May 24, 2022 at 12:33 pm
- 0 votes
0
Also try configure the CORS in your ConfigureServices method on your Startup.cs in your .net API
```
Public void ConfigureServices(IServiceCollection services)
{
    // Add service and create Policy with options
    services.AddCors(options =>
    {
        options.AddPolicy("CorsPolicy",
            builder => builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials() );
    });

    
```
and use app.UseCors("CorsPolicy"); in configure services method.

Also make sure to select correct token type from below to access you api,

Also check if you need to adjust the packages > microsoft identity web issues(github.com)
Login or Signup to reply.

- BluelikeSky8
- August 16, 2022 at 8:32 am
- 0 votes
0
This type of error is very common please check your controller name

For example:
```
[HttpPatch]
[Route("UserProfileUpdate")]
public async Task<ActionResult<MyHtApiResponse>> UserProfileUpdate(AdminVM adminVM)
        
```
In this example, The Route name and controller name are same, sometime it also give this type of error
Login or Signup to reply.