Angular 5向.NET Core WebApi发起Post请求遇问题求助

Hey there, let's work through this issue step by step. From what you've shared, it seems you're running into trouble making a POST request from your Angular 5 app (localhost:4200) to your .NET Core Web API (localhost:55007). Let's break down the most likely problems and fixes:

1. Fix Cross-Origin Resource Sharing (CORS) #

Cross-domain requests are blocked by default in browsers, so this is the most frequent culprit. You need to configure your .NET Core API to allow requests from your Angular app's origin:

In your .NET Core Startup.cs: #

First, add CORS services in ConfigureServices:

services.AddCors(options =>
{
    options.AddPolicy("AllowAngularLocalhost",
        builder => builder.WithOrigins("http://localhost:4200")
                          .AllowAnyHeader()
                          .AllowAnyMethod());
});

Then, enable the policy in Configure (make sure this comes before UseMvc):

app.UseCors("AllowAngularLocalhost");
app.UseMvc();

2. Fix Typo in Request Parameters #

Looking at your code snippet, you have {emai... — that's a typo for email! This will cause your API to receive an incomplete or incorrect parameter, leading to failed requests. Correct that spelling first.

3. Properly Format Angular 5 HTTP Request #

Angular 5's Http module requires explicit header configuration for JSON requests. Update your login method to ensure the request is formatted correctly:

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class LoginService {
  constructor(public http: Http) { }

  login(email:string, password:string){
    // Set JSON content-type header
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const options = new RequestOptions({ headers: headers });

    // Send properly formatted request with corrected parameter name
    return this.http.post('http://localhost:55007/Login/Login', 
        { email: email, password: password }, 
        options)
        .map(res => res.json())
        .catch(error => {
            console.error('Login request failed:', error);
            return Observable.throw(error);
        });
  }
}

4. Verify .NET Core API Endpoint Setup #

Make sure your API's Login controller is correctly configured to receive the POST request and bind parameters:

[Route("api/[controller]")] // Adjust route if needed to match your URL
[ApiController]
public class LoginController : ControllerBase
{
    [HttpPost("Login")] // Matches the /Login/Login endpoint in your Angular request
    public IActionResult Login([FromBody] LoginRequest model)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        // Add your login logic here
        return Ok(new { success = true, message = "Login successful" });
    }
}

// Model class to bind request body
public class LoginRequest
{
    public string Email { get; set; }
    public string Password { get; set; }
}

• Ensure the model property names match what you're sending from Angular (case-insensitive, but consistency helps avoid issues)
• Use [FromBody] to tell .NET Core to parse the request body as JSON

5. Debug with Browser Dev Tools #

Open your browser's developer tools (F12), go to the Network tab, and check the failed login request:

• Look at the status code (e.g., 400 = bad request, 404 = endpoint not found, 0 = CORS blocked)
• Inspect the Request Payload to confirm your parameters are sent correctly
• Check the Response tab for error messages from the API

内容的提问来源于stack exchange，提问作者BGeeK