CORS issue in .Net Framework 4.5 with Angular 6

Md Tak

7y7.3k

I have created API in .Net Framework4.5 and It's working fine in Postman but When i implenting with Angular7 then we didn't get Requested Parameters like(Username and Pass) in API.

I have already tried these steps:

I have already istalled this packege Microsoft.AspNet.WebApi.Cors

DemoController.cs

using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;
using System.Web.Http.Cors;
using System.Web.Http.Description;
using TestData.Models;
namespace TestData.Controllers
{
public class DemoController : ApiController
{
[HttpPost]
[Route("api/Demo/Login")]
public IHttpActionResult Login(HttpRequestMessage request)
{
string username = HttpContext.Current.Request.Form["Username"]; // getting Null
string pass = HttpContext.Current.Request.Form["Pass"]; // getting Null
return Ok('Username: ' +username + 'Password :' +pass);
}
}
}

WebApiConfig.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using System.Web.Http.Cors;
namespace TestData
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
}
}
}

I am using some code of Angular

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class AuthService {
apiUrl : any = 'http://mydomain/api';
constructor(private http : HttpClient) { }
GetHttpHeaders() : HttpHeaders{
const headers = new HttpHeaders().set('Content-Type', 'application/json');
return headers;
}
loginUser(){
var data = JSON.stringify({
"Username" : '3333',
"Pass" : '123456'
})
return this.http.post(this.apiUrl+'/Demo/Login', data, { headers : this.GetHttpHeaders() }).subscribe((results) => {
console.log(results);
});
}
}

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rajeesh Menoth7y ago
Hi,

Try the following steps.
Install CORS to the API project "Install-Package Microsoft.Asp.Net.WebApi.Cors".
Open the App_Start/WebApiConfig.cs file and add the following code to the WebApiConfig.Register method.
First enable the cors then add the remening section I think in your code I am able to see cors enable is done after the route.
using System.Web.Http;

namespace WebServiceApp
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            //CORS config
            config.EnableCors();
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}
   3. Add the [EnableCors] attribute to the UserController.
Only copy the " [EnableCors(origins: "http://localhost:8578", headers: "*", methods: "*")] " and orgins is nothing but the angular request url domain name. Currently we are tested in the local host so that's why put as localhost url.
namespace WebServiceApp.Controllers
{
    [EnableCors(origins: "http://localhost:8578", headers: "*", methods: "*")]
    public class UserController : ApiController
    {
        public HttpResponseMessage GetInfo()
        {
            var res = new List() {
                new User { ID = 1, Name = "Gopal", Email = "[email protected]" },
                new User { ID = 2, Name = "Nayan", Email = "[email protected]" },
                new User { ID = 3, Name = "Shuvo", Email = "[email protected]" }
            };
            return Request.CreateResponse(HttpStatusCode.OK, res);
        }
    }
}
Reference :
https://www.c-sharpcorner.com/UploadFile/009ee3/implementation-of-cross-origin-request-in-Asp-Net-web-api-2/
0
7y ago
WebConfig.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using System.Web.Http.Cors;
namespace UrbanDB.API
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*", "Access-Control-Allow-Origin");
config.EnableCors(cors);
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
}

And below code just put on controller name Like

[EnableCors("*","*","*")]
public class DemoController : ApiController
0
Bidyasagar Mishra7y ago
Go through the below link you will get the solution for
http://csharp-video-tutorials.blogspot.com/2016/09/cross-origin-resource-sharing-aspnet.html
0
Veerendra Annigere7y ago
Madan Soraba.

No.Configuration varies for different hosting vendors.

For Godaddy,

Include a file named .htaccess (notice the leading dot) anywhere in the path of the requested file, that file should contain this line:
Header set Access-Control-Allow-Origin "*".
My point is CORS issue is nothing to do with frontend. Configuration needed in backend.
0
Madan Shekar7y ago
@
Veerendra Annigere

thanks for sharing valuable information...

My question is in case of API's are deployed at Godaddy or some other servers , in such case also we will get same configuratoion section.
+1
Veerendra Annigere7y ago
CORS issue is nothing to do with you're coding. Configure CORS where you're API is deployed. You can set origin in you're code.

Eg: If You're API is deployed in Azure

+2
Madan Shekar7y ago
using System.Web.Http.Cors;
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class LoginController : ApiController
{
//your code
}

run this nuget package manger
Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.2.7

If it helps pls mark as answer.
0
Gajendra Jangid7y ago
1. [RoutePrefix("api/Demo")]
2. public class DemoController : ApiController
3. {
4. [HttpPost]
5. [Route("Login")]
6. public IHttpActionResult Login(HttpRequestMessage request)
7. {
8. string username = HttpContext.Current.Request.Form["Username"]; // getting Null
9. string pass = HttpContext.Current.Request.Form["Pass"]; // getting Null
10. return Ok('Username: ' +username + 'Password :' +pass);
11. }
12. }
+1