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

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

Я уже пробовал эти шаги:

Я уже установил этот пакет Microsoft.AspNet.WebApi.Cors

Демоконтроллер.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.info(results);
        });
    }
}
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
3
0
1 961
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

Серверная часть:

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.info(results);
    });
  }

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

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

   public string Password{ get; set; }
}

и результат действия:

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

@AdritaSharma Если вы можете добавить, что было не так с его предыдущим кодом, это поможет другим людям лучше понять ваш ответ, что приведет к большему количеству голосов.

Mihir Dave 28.05.2019 15:52

Конечно. я добавляю это

Adrita Sharma 28.05.2019 15:53

Почему вы передаете его как JObject вместо использования связывателя модели?

johnny 5 28.05.2019 16:03

Обычно я предпочитаю ModelBinder, это может быть класс вроде LoginRequestDTO, у которого есть имя пользователя и пароль. Из вопроса я не был уверен, есть ли у него класс или нет, поэтому добавил JObject, так как это будет работать, даже если у него нет класса модели. Я добавляю это в ответ. Спасибо

Adrita Sharma 28.05.2019 16:06

Другие вопросы по теме