Вызов метода POST из сервиса Angular 6 в REST с использованием веб-API в asp.net mvc

Question

ОПЦИИ http://localhost:51156/api/values 400 (неверный запрос)

Не удалось загрузить http://localhost:51156/api/values: Ответ на предпечатную проверку имеет недопустимый код состояния HTTP 400.

в обслуживании

postTest(student: Student) {

    console.log("In service " + student);
    return this._httpService.post('http://localhost:51156/api/students', student);

}

в component.ts звонит из внешнего интерфейса

 postTest(){
    console.log("see now ..."+this.student);
    this.uservice.postTest(this.student).subscribe();
  }

интерфейс: данные HTML

 <button type="submit" class="btn btn-primary" (click)="postTest()">TEST</button>

ошибки при отладке консоли: - Google Chrome

Angular is running in the development mode. Call enableProdMode() to enable 
the production mode.
user.component.ts:47 see now ...[object Object]
user-service.service.ts:100 In service [object Object]
2zone.js:2969 OPTIONS http://localhost:51156/api/students 400 (Bad Request)
scheduleTask @ zone.js:2969
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ 
zone.js:407

GET работает нормально для меня, но Плохой запрос POST (POST также хорошо работает с инструментом POSTMAN, поэтому нет проблем с кодом веб-интерфейса asp.net) провел поиск на многих веб-сайтах, но не звонит С почтальоном я проверил данные JSON, он отлично работает с почтальоном Я допустил ошибку при вызове метода http.post (), забыв о том, что SYNTAX может ошибаться в «angular 6» Как вы, люди, называете почтовый метод с угловых Я проверял почтальон работает отлично Какой синтаксис в угловых 6

OPTIONS http://localhost:51156/api/students 400 (Bad Request)
Failed to load http://localhost:51156/api/students: Response for preflight 
has invalid HTTP status code 400.
Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", 
headers: Headers, …}

Изменено до

postTest(){ console.log("see now ..."+this.student); 
console.log(this.student) this.uservice.postTest(this.student).subscribe( 
success => { console.log("success"+success) }, error => { console.log("errrr 
"+error) } ); } 

и ВЫХОД

 errrr Response with status: 0 for URL: null 

"Помогите мне быстро решить потраченные целые два дня в этом .........."

Удар

  http://localhost:51156/api/students from POSTMAN

Проходящий

Body{"Sid":1,"fname":"Sss","lname":"XYZ","rollno":666,"address":null,"marks":0," grade":null,"discount":0.0}

raw JSON (приложение / json)

затем после отправки нажал статус 200 OK

Answer 1

    SOLVED issue using this 

web.config

    <system.webServer>
        <httpProtocol>
         <customHeaders>
             <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
             <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS,PUT,DELETE" />
         </customHeaders>
       </httpProtocol>
            <rewrite>            
                <outboundRules>
                    <clear />                
                    <rule name="AddCrossDomainHeader">
                        <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
                        <conditions logicalGrouping="MatchAll" trackAllCaptures="true">
                            <add input="{HTTP_ORIGIN}" pattern="(http(s)?://((.+\.)?domain1\.com|(.+\.)?domain2\.com|(.+\.)?domain3\.com))" />
                        </conditions>
                        <action type="Rewrite" value="{C:0}" />
                    </rule>           
                </outboundRules>
            </rewrite>
     </system.webServer>

поставить на контроллер: выдавал ошибку, как многократную ошибку источника разрешения

    [System.Web.Http.Cors.EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]
    public class StudentsController : ApiController

написать внутри webapiconfig.cs

     var cors = new System.Web.Http.Cors.EnableCorsAttribute("http://localhost:51156", "*", "*");

            config.EnableCors(cors);

            // ADD JUST THIS LINE TO REGISTER FOLLOWING CLASS.
            config.Formatters.Add(new BrowserJsonFormatter());
   // TO SEE DATA IN JSON IN CHROME BROWSER ADD FOLLOWING CLASS BrowserJsonFormatter and REGISTER IN METHOD ADD NEW OBJECT OF THIS CLASS.
public class BrowserJsonFormatter : System.Net.Http.Formatting.JsonMediaTypeFormatter
{
    public BrowserJsonFormatter()
    {
        this.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
        this.SerializerSettings.Formatting = Formatting.Indented;
    }

    public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType)
    {
        base.SetDefaultContentHeaders(type, headers, mediaType);
        headers.ContentType = new MediaTypeHeaderValue("application/json");
    }
}

//-----------------------------------------------------------------------------------------------------------------------

Answer 2

Внесите следующие изменения в свой код, и эта проблема обязательно будет решена.

1) In component.ts, I suggest you to call service in the following manner:-

this.uservice.postTest(this.student).subscribe(
        success => {
            if (success.Result) {

            }
        },
        error => {

        }

    );

2) Inside service.ts make these changes : -

 postTest(student: any) {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this.http.post('http://localhost:51156/api/students/Save,
        JSON.stringify(
            {
                "Student": student
            }), options)
        .map(res => res.json());
}

3) Your API method should be :-

public IHttpActionResult Save([FromBody] StudentModel Student)