Проблема CORS в .Net Framework 4.5 с Angular 6 - PullRequest
Новая
       11

Проблема CORS в .Net Framework 4.5 с Angular 6

2 голосов
/ 28 мая 2019

Я создал API в .Net Framework 4.5, и он отлично работает в Postman, но когда я внедряю с Angular7, мы не получаем запрашиваемые параметры, такие как (имя пользователя и пароль) в API.

У меня естьуже попробовал эти шаги:

Я уже установил этот пакет 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);
        }
    }
}

Я использую некоторый код 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);
        });
    }
}

1 Ответ

1 голос
/ 28 мая 2019

В пользовательском интерфейсе вы добавили 'Content-Type', 'application/json', поэтому лучше, если вы примете параметр типа object в ActionResult.

Попробуйте это решение:

Backend: 

public IHttpActionResult Login(JObject request)
{
    string username = Convert.ToString(request.SelectToken("Username")) 
    ...
}

Пользовательский интерфейс: 

 loginUser(){
    var data = {
      "Username" : '3333',
      "Password" : '123456'
    }
    return this.http.post(this.apiUrl+'/Demo/Login', data, { headers : this.GetHttpHeaders() }).subscribe((results) => {
      console.log(results);
    });
  }

Другой способ - создать класс модели: 

public class LoginRequestDTO 
{
   public string Username{ get; set; }

   public string Password{ get; set; }
}

и ActionResult: 

public IHttpActionResult Login(LoginRequestDTO request)
{
    string username = request.Username;
    ...
}
...