.NET API 不接受来自 Angular 2 App 的“Access-Control-Allow-Origin”

Question

如何将 contenty 类型设置为 application/json 格式。

我有一种发布方法，用于添加我的客户的联系人。 我创建了一个 WebAPI，它具有以下代码...

[Produces("application/json")]
[Route("api/[controller]")]
public class ContactController : Controller
{
    private readonly DatabaseContext _context;
    public ContactController(DatabaseContext context)
    {
        _context = context;
    } 

    [Route("SaveContact")]
    [HttpPost]
    public bool SaveContact(Contact contact)
    {
        return true;
        //var result = _context.Contact.Add(contact);
        //return result == null ? true : false;
    }


    [Route("GetContactList")]
    [HttpGet]
    public List<Contact> GetContactList()
    {
        var result = _context.Contact.ToList();
        return result;
    }
}

我的尝试 我已经尝试使用 POSTMAN 和 Fiddler 工具来测试天气我是否能够将正文发送到 api，以下是 POSTMAN 和 Fiddler 的结果：

a. Fiddler: able to send the data (in form of contact model)
[![enter image description here][1]][1]

b. POSTMAN: able to send the data (in form of contact model)    
[![enter image description here][1]][1]

我面临什么问题：- 当我尝试通过 Angular 2 发出发布请求时，我无法将正文发送到 API。我已经尝试了所有的可能性，但没有什么对我有用。 这太令人沮丧了，为什么模型没有在 api 中填充。以下是我如何将请求从 Angular 2 发送到 API 的详细信息。

以下是我提出发布请求的两种不同方式。

import { Headers, Http, HttpModule, RequestMethod, RequestOptions, Response ,Request } from '@angular/http';
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/operator/map';
import { Injectable } from '@angular/core';
import { _App } from "app/app.global"
import { ResponseContentType } from '@angular/http/src/enums';


    @Injectable()
    export class PostService{

        headers:any;
        requestoptions:any;
        constructor(private _http:Http){

       }
        PostMethod2(URL,Body){
            let url:string;
            url = _App._URL;
            const contact = [];
            contact.push(Body);
            console.log(JSON.stringify(contact));
            url = url + URL;
            this.headers = new Headers();
            this.headers.append('Content-Type', 'application/json');
            this.headers.append("Access-Control-Allow-Origin","*");
            console.log(url);
            console.log(this.headers);
            this.requestoptions = new RequestOptions({
                method: RequestMethod.Post,
                url: url,
                headers: this.headers,
                body: JSON.stringify(contact),
                responseType : ResponseContentType.Json,

            })

            return this._http.request(new Request(this.requestoptions))
                .map((res: Response) => {
                    if (res) {
                        debugger;
                        return [{ status: res.status, json: res.json() }]
                    }
                    debugger;
                });

        }

        PostMethod(URL,Body){
            let url : string;
            const contact = [];
            contact.push(Body);

            url = _App._URL + URL;
            this.headers = new Headers();
            this.headers.append('Content-Type', 'application/json');
            this.headers.append("Access-Control-Allow-Origin","*");
            console.log(JSON.stringify(contact));
            console.log(url);
            console.log(this.headers);

            return this._http.post( url,JSON.stringify(contact),{headers:this.headers})
                .map((res: Response) => {
                    if (res) {
                        debugger;
                        return [{ status: res.status, json: res.json() }]
                    }
                    debugger;
                });

        }
    }

后置方法()

Postmethod2()

回应

以下是我通过 jquery Ajax 方法发出的请求，如果你注意到了，你会看到 contenty-type 的值为 application/json，在 angular 2 的情况下我没有得到。

Answer 1

使用 Cors。

Install-Package Microsoft.AspNet.WebApi.Cors

App_Start/WebApiConfig - 注册方法：

config.EnableCors();

FooController：

[EnableCors(origins: "*", headers: "*", methods: "*")]

Answer 2

除非您需要公开 API 并由任何域使用，否则您需要允许 cors 和我的建议使其成为 *，如另一个答案中所述。 顺便说一句，你不需要额外的包

public void ConfigureServices(IServiceCollection services)
{
   var originWhiteList = new[] { ... };
   var methods = new[] { "GET", "PUT", "POST", "DELETE" };
   var headers = new[] { .. };
   services.AddCors(options =>
        {
            options.AddPolicy(
                "MyPolicy",
                builder => builder
                    .WithOrigins(originWhiteList)
                    .WithMethods(methods)
                    .WithHeaders(headers)
                    .AllowCredentials());
        });
   ..... 
}

public void Configure(IApplicationBuilder app)
{
    app.UseCors("MyPolicy");
    ......
}