Контроль доступа разрешает проблему происхождения, возникшую в Angular 6 после операции

Question

Я могу выполнить операцию 'Get' без проблемы CORS, но не могу выполнить операцию 'Post' в Angular 6. Получение запрашиваемого ресурса в заголовке No Access-Control-Allow-Origin.Источник 'http://localhost:4200', следовательно, не имеет доступа.Ответ имеет HTTP-код состояния 500.

Я пробовал двумя способами.но проблема не устранена.

  createCustomer(Customer) {
console.log(Customer);
return this.http.post(this._global.baseUrl + '/Customer/CreateCustomer', Customer, { 
  headers: new HttpHeaders({
    "Content-Type": "application/json"        
  })      
});      

}

2-й способ:

      createCustomer(Customer) {
    console.log(Customer);
    return this.http.post(this._global.baseUrl + '/Customer/CreateCustomer', JSON.stringify(Customer), this._global.httpOptions)
  }

Класс заголовка:

 export class AppGlobals {
readonly baseUrl: string = 'http://localhost:50264/api';
  readonly httpOptions = {
    headers: new HttpHeaders({
      "Content-Type": "application/json"
    })    
  };
}

Код ASP.Net Core API: Startup.csКод:

services.AddCors(options =>
        {
            options.AddPolicy("AllowCors",
            builder => builder.WithOrigins("http://localhost:50264")
            .AllowAnyHeader()
            .AllowAnyOrigin()
            .AllowAnyMethod()
            );
        });
        services.AddMvc();   




 public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler();
        }

        app.UseCors("AllowCors");
        app.UseMvc();
        //app.Run(async (context) =>
        //{
        //    throw new Exception("Example exception");
        //});
    }        

Код контроллера:

// POST: api/Customer/CreateCustomer    
    [EnableCors("AllowCors")]
    [ActionName("CreateCustomer")]        
    public JsonResult CreateCustomer([FromBody]Customer customer)
    {

Это экраны ошибок. Экран журнала API

Экран 2: Экран журнала API 2

Экран почтальона: Экран почтальона

Answer 1

Измените источник на http://localhost:4200.

services.AddCors(options =>
{
    options.AddPolicy("AllowCors", builder => 
         builder.WithOrigins("http://localhost:4200") // instead of 50264
        .AllowAnyHeader()
        .AllowAnyOrigin()
        .AllowAnyMethod()
    );
}

Или добавьте его в список

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

Это решит часть CORS.Если вы все еще получаете ошибку HTTP 500, ошибка происходит где-то в вашем методе CreateCustomer.

Answer 2

Просто я изменил свой код на:

createCustomer(customer: Customer) {
let body = {
  "name": customer.name,
  "email": customer.email,
  "primaryPhone": customer.primaryPhone,
  "alternatePhone": customer.alternatePhone,
  "address1": customer.address1,
  "address2": customer.address2,
  "address3": customer.address3,
  "city": customer.city,
  "state": customer.state,
  "country": customer.country,
  "zip": customer.zip,
};
return this.http.post(this._global.baseUrl + '/Customer/CreateCustomer', body, { 
  headers: new HttpHeaders({
    "Content-Type": "application/json"        
  })      
}); 

Answer 3

Вот как в настоящее время мы делаем,

У нас есть HttpOptionsClass, который содержит код ниже

export const httpOptions = {
  headers: new HttpHeaders({
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*"
  })
};

И у нас есть класс обслуживания, который внедряет сервис HttpClient и ниженаш POST код действия

saveCustomer (customer: Customer ): Observable<any> {
    return this.httpClient.post<Customer>(
      environment.baseUrl + "/customers",
      customer,
      httpOptions
    );
  }

Ниже представлен бэкэнд ASP.Net Core Web API с обработкой CORS

Контроллер API

[Produces("application/json")]
[Route("api/[controller]s")]

public class CustomerController : Controller
{
        [HttpPost]
        public async Task<IActionResult> Post([FromBody] Customer customer)
        {
            // your code goes here
            return Created($"api/customers/{customer.Id}", customer);
        }
}

appsettings.json класс

{
  "AllowedOrigins": [
    "http://localhost:4200"
  ],
    "AllowedHosts": "*",
}

Класс запуска

public void ConfigureServices(IServiceCollection services)
        {
        services.AddCors(options =>
            {
                // this defines a CORS policy called "default"
                options.AddPolicy("AllowSpecificOrigin", policy =>
                {
                    var corsUrlSection = Configuration.GetSection("AllowedOrigins");
                    var corsUrls = corsUrlSection.Get<string[]>();
                    policy.WithOrigins(corsUrls)
                        .AllowAnyHeader()
                        .AllowAnyMethod();
                });
            });
        }

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
        app.UseCors("AllowSpecificOrigin");
        }

Доступ из клиентского компонента

  this.service.saveCustomer(this.customer : Customer).subscribe(
    result => {

    },
    error => {

    }
  );

Сначала проверьте, достигли ли вы конечной точки.Если вы получили ошибку 500 и проблему с CORS, есть большая вероятность, что что-то не так с вашим кодом внутри действия