Проблема с загрузкой файла с использованием доменного имени с использованием CORS - веб-API ASP.NET и jQuery

Мне нужна загрузка междоменных изображений с использованием веб-API ASP.NET и AJAX. Я новичок в этом подходе.Проблема с загрузкой файла с использованием доменного имени с использованием CORS - веб-API ASP.NET и jQuery

HTML

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <meta charset="utf-8" /> 
 
</head> 
 
<body> 
 
    <form method="post" enctype="multipart/form-data"> 
 
     <input type="file" id="fileUpload" /> 
 
     <input type="submit" value="Upload CORS image" id="btnUpload" /> 
 
    </form> 
 
    <div id="response"><!-- AJAX Response --></div> 
 
    <script type="text/javascript"> 
 
     //55622 
 
     jQuery.support.cors = true; 
 
     function uploadFile() { 
 
      var fa = new FormData(); 
 
      fa.append("upload_pass", document.getElementById("fileUpload").files[0]); 
 
      $.ajax({ 
 
       type: "POST", 
 
       url: "http://localhost:5000/api/upload/imagefile", 
 
       data: fa, 
 
       contentType: false, 
 
       processData: false, 
 
       //dataType: "jsonp", 
 
       crossDomain: true, 
 
       success: function (data) { 
 
        // do something here. 
 
       } 
 
      }); 
 
     } 
 
     $(document).ready(function() { 
 
      $("#btnUpload").bind("click", function() { 
 
       uploadFile(); 
 
      }); 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

API Метод контроллера

using Microsoft.AspNet.Cors; 
 
using Microsoft.AspNet.Mvc; 
 

 
namespace WebApiz.Controllers 
 
{ 
 
    [Route("api/[controller]")] 
 
    public class UploadController : Controller 
 
    { 
 
     [EnableCors("AllowAll")] 
 
     [Route("imagefile")] 
 
     [HttpPost("imagefile")] 
 
     public string ImageFile(object data) 
 
     { 
 
      return data.ToString(); 
 
     } 
 
    } 
 
}

У меня есть другие методы контроллера, которые прекрасно работают с [EnableCors("AllowAll")], но это один дает мне следующее сообщение об ошибке:

HTTP Error 405.0 - Method Not Allowed The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used.

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

Заранее спасибо.

источник

2016-03-14 Subrata Sarkar

вам необходимо установить параметры EnableCors атрибута

Чтобы разрешить все методы, использовать подстановочное значение «*». В следующем примере разрешены только запросы GET и POST.

[EnableCors(origins: "http://localhost:5000", headers: "*", methods: "get,post")]

позволяют CORS с помощью web.config:

Следующий пример Разрешить CORS для любого происхождения

<system.webserver> 
    <httpProtocol> 
     <customHeaders> 
     <add name="Access-Control-Allow-Origin" value="*" /> 
     <add name="Access-Control-Allow-Methods" value="GET, POST" /> 
     </customHeaders> 
    </httpProtocol> 
</system.webserver>

источник

2016-03-14 15:14:49 esiprogrammer

Спасибо за быстрый ответ.Я использовал '[EnableCors (origins:« http: // localhost: 5000 », заголовки:« * », методы:« get, post »)]', но он говорит: «лучшая перегрузка для EnableCorsAttribute не имеет параметра с именем originins '. Кроме того, в моих других методах контроллера, позволяющих CORS с помощью [[EnableCors («AllowAll»)] работает отлично. Мне не нужно было его параметризировать нигде. В 'Startup.cs' я настроил Cors уже таким образом:' public void Configure (приложение IApplicationBuilder, IHostingEnvironment env, ILoggerFactory loggerFactory) {app.UseCors ("AllowAll"); } 'Мне все еще нужно добавлять записи в web.config? –

'services.AddCors (options => options.AddPolicy (" AllowAll ", p => p.AllowAnyOrigin(). AllowAnyMethod(). AllowAnyHeader()));' Так я установил Cors внутри 1Startup.cs> ConfigureServices', который сообщает системе разрешить все происхождение, все методы и AllHeaders. Итак, почему я должен параметризовать '[EnableCors]' на уровне метода внутри контроллера или на уровне 'web.config'/s? На самом деле другие методы с помощью только '[EnableCors (« AllowAll »)] работают отлично. Однако ни один из них не загружает ничего на сервер. –

Это зависит от того, вы можете включить CORS для всех методов, чтобы вы могли использовать web.config или включить его при запуске, но если вы хотите включить его только для определенного метода, вам нужно включить его для каждого контроллера/за действие с атрибутами , – esiprogrammer

Я попробовал несколько вещей, и, наконец, это работает для меня.

HTML

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <meta charset="utf-8" /> 
 
</head> 
 
<body> 
 
    <form method="post" enctype="multipart/form-data"> 
 
     <input type="file" id="fileUpload" name="fileUpload" multiple="multiple" /> 
 
     <input type="button" value="Upload CORS image" id="btnUpload" /> 
 
    </form> 
 
    <div id="response"><!-- AJAX Response --></div> 
 
    <script type="text/javascript"> 
 
     jQuery.support.cors = true; 
 

 
     function uploadFiles(url) { 
 
      var data = new FormData(); 
 

 
      var files = $("#fileUpload").get(0).files; 
 

 
      // Add the uploaded image content to the form data collection 
 
      if (files.length > 0) { 
 
       for (var f = 0; f < files.length; f++) { 
 
        data.append("UploadedImage", files[f]); 
 
       } 
 
      } 
 

 
      // Make Ajax request with the contentType = false, and procesDate = false 
 
      $.ajax({ 
 
       type: "POST", 
 
       url: url, 
 
       contentType: false, 
 
       processData: false, 
 
       data: data, 
 
       success: function (response) { 
 
        $("#response").html(response); 
 
       } 
 
      }); 
 
     } 
 

 
     $(document).ready(function() { 
 
      $("#btnUpload").bind("click", function() { 
 
       uploadFiles("http://localhost:5000/api/upload/fileupload"); 
 
      }); 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

Контроллер

using Microsoft.AspNet.Cors; 
 
using Microsoft.AspNet.Hosting; 
 
using Microsoft.AspNet.Http; 
 
using Microsoft.AspNet.Mvc; 
 
using Microsoft.Net.Http.Headers; 
 
using System.Collections.Generic; 
 
using System.IO; 
 
using System.Threading.Tasks; 
 

 
namespace ProjectApi.Controllers 
 
{ 
 
    [Route("api/[controller]")] 
 
    public class UploadController : Controller 
 
    { 
 
     private IHostingEnvironment _environment; 
 
     public UploadController(IHostingEnvironment environment) 
 
     { 
 
      _environment = environment; 
 
     } 
 

 
     [EnableCors("AllowAll")] 
 
     [Route("fileupload")] 
 
     [HttpPost("fileupload")] 
 
     public async Task<object> FileUpload() 
 
     { 
 
      var httpRequest = HttpContext.Request; 
 
      var imageUrls = string.Empty; 
 
      var fileName = string.Empty; 
 

 
      if (httpRequest.Form.Files.Count > 0) 
 
      { 
 
       var uploads = Path.Combine(_environment.WebRootPath, "uploads"); 
 
       for (var f = 0; f < httpRequest.Form.Files.Count; f++) 
 
       { 
 
        var postedFile = httpRequest.Form.Files[f]; 
 
        var files = new List<IFormFile>(); 
 
        files.Add(postedFile); 
 

 
        foreach (var file in files) 
 
        { 
 
         fileName = ContentDispositionHeaderValue.Parse(postedFile.ContentDisposition).FileName.Trim('"'); 
 
         var fileExtension = fileName.Substring(fileName.LastIndexOf(".")); 
 
         var randomFileName = System.DateTime.Now.Ticks.ToString(); 
 
         var finalFileName = randomFileName + fileExtension; 
 

 
         await file.SaveAsAsync(Path.Combine(uploads, finalFileName)); 
 
         imageUrls += "<img src='http://localhost:5000/uploads/" + finalFileName + "' alt='' /><br />"; 
 
        } 
 
       } 
 

 
       return imageUrls; 
 
      } 
 

 
      return "No image were uploaded"; 
 
     } 
 
    } 
 
}

Спасибо esiprogrammer за то, что вы показали мне дорогу. Однако я не использовал какую-либо пользовательскую модель.

Я также ссылался на эти статьи:

http://www.c-sharpcorner.com/UploadFile/2b481f/uploading-a-file-in-Asp-Net-web-api/ http://www.mikesdotnetting.com/article/288/asp-net-5-uploading-files-with-asp-net-mvc-6 http://blog.kotowicz.net/2011/05/cross-domain-arbitrary-file-upload.html

источник

2016-03-15 14:45:18

Проблема с загрузкой файла с использованием доменного имени с использованием CORS - веб-API ASP.NET и jQuery

ответ

Смежные вопросы