Asp.net Core и Угловой 7 Корс - PullRequest
Новая
       17

Asp.net Core и Угловой 7 Корс

2 голосов
/ 01 апреля 2019

Почему я получаю Cors Error

Access to XMLHttpRequest at 'http://localhost:5000/api/upload' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Насколько я понимаю. Cors включен в моем классе запуска в моем asp.net core web api

А вот и мой код 

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
}

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

        app.UseCors(x => x.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader());

        app.UseAuthentication();
        app.UseMvc();
}

А это мой код Angular 7

HTML для fileupload 

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <div class="form-group">
      <input type="file" name="image"  />
  </div>
  <div class="form-group">
      <button class="btn btn-primary">Submit</button>
  </div>
</form>

А это fileupload.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-fileupload',
  templateUrl: './fileupload.component.html',
  styleUrls: ['./fileupload.component.css']
})
export class FileuploadComponent implements OnInit {
  fileData: File = null;
  formGroup = new FormGroup({
    one: new FormControl
  });
  constructor(private http: HttpClient) { }

  fileProgress(fileInput: any) {
    this.fileData = <File>fileInput.target.files[0];
  }

  ngOnInit() {
  }

  onSubmit() {
    const formData = new FormData();
    formData.append('file', this.fileData);
    this.http.post('http://localhost:5000/api/upload', formData)
    .subscribe(res => {
      console.log(res);
      alert('SUCCESS !!');
    })

    console.log('Called');
  }

}

На самом деле я следую этому уроку: 

https://www.tutsmake.com/new-angular-7-upload-file-image-example/

И я в той части, где я проверяю API загрузки файлов с помощью Angular 7. Я тестировал API с помощью почтальона, и он до сих пор правильно работал с кодом в API

enter image description here

И ниже код контроллера загрузки 

[Produces("application/json")]
    [Route("api/[controller]")]
    public class UploadController : Controller
    {
        // GET: /<controller>/
        public IActionResult Index()
        {

            try
            {
                var file = Request.Form.Files[0];
                Console.WriteLine();

                return null;
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
                Console.WriteLine(ex.StackTrace);
                throw ex;
            }
        }
    }

Я также получаю сообщение об ошибке 

System.ArgumentOutOfRangeException: 'Index was out of range. Must be non-negative and less than the size of the collection.' on

var file = Request.Form.Files[0];

это из-за того, что Angular 7 не отправляет данные?

Большое спасибо.

1 Ответ

3 голосов
/ 01 апреля 2019

Доступ к XMLHttpRequest в 'http://localhost:5000/api/upload' от источника' http://localhost:4200' заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'.

На самом деле, я сомневаюсь, что вы забыли перезагрузить ASP.NET Core Server после настройки CORS.

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

Я также получаю сообщение об ошибке 

System.ArgumentOutOfRangeException: 'Index was out of range. Must be non-negative and less than the size of the collection.' on

var file = Request.Form.Files[0];

, это из-заAngular 7 не отправляет данные?

Да.Это потому, что вы не связали обработчик событий для установки свойства fileData при выборе файла .

Чтобы исправить это, создайте метод onFileChange(event): 

@Component({
  selector: 'app-fileupload',
  templateUrl: './fileupload.component.html',
  styleUrls: ['./fileupload.component.css']
})
export class FileuploadComponent implements OnInit {

  // ...

  onFileChange(event){
    this.fileData = <File> event.target.files[0];
  }

  // ...
}

и измените шаблон следующим образом: 

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <div class="form-group">
      <input type="file" name="image" (change)="onFileChange($event)"  />
  </div>
  <div class="form-group">
      <button class="btn btn-primary">Submit</button>
  </div>
</form>

В качестве примечания, не возвращайте null как IActionResult в вашем методе действия.Это приведет к необработанному исключению: 

    public IActionResult Index()
    {
        try
        {
            var file = Request.Form.Files[0];
            Console.WriteLine();

            return null;             ////////// don't return null
        }
        catch (Exception ex)
        {
            // ...
        }
    }
...