Получение ошибки «Управление доступом-Разрешить-Происхождение» при вызове внешнего WebAPI

#c# #api #cors

Вопрос:

Я нашел много страниц, посвященных этой проблеме, но ни одно из решений не сработало.

У меня есть кнопка JavaScript в представлении, которая вызывает метод WebAPI(C#)

             $('#btn-Sign-in', this).click(function () {

              var apiUrl = 'https://localhost:44391/api/test';
           fetch(apiUrl).then(response => {
           return response.json();
           }).then(data => {
           // Work with JSON data here
          console.log(data);
           }).catch(err => {
          // Do something for an error here
          });
          });
 

Это мой метод Webapi, который вызывает внешний api:

  [RoutePrefix("api")]
public class TestController : ApiBaseController
{
    [HttpGet]
    [Route("redirectforauth")]
    [RequiresPermission("Home:View")]

    [HttpGet]
    [Route("test")]
    [RequiresPermission("Home:View")]

    public async Task<IHttpActionResult> ConnectExternal()
    {
        var request = new FlurlRequest("URL of an external website")
                     .SetQueryParam(...)
                     .SetQueryParam(...)
                     .SetQueryParam(...)
                     .SetQueryParam(...);

        var redirectUrl = request.Url.ToInvariantString();

        return  Redirect(redirectUrl);
    }
 

когда я запускаю проект, я получаю эту ошибку:

  CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
 

Комментарии:

1. Сбой происходит не из — за вызова внешнего API — http — запросы из C# не выполняют проверки CORS (если вы явно не сделали этого), а скорее из-за вызова https://localhost:44391/api/test -JS/ страница с кнопкой на ней, по-видимому, также не находится в localhost:44391 домене

Ответ №1:

Эта ошибка вызвана тем, что URL-адрес вашего веб-приложения и URL-адрес API C# имеют разное происхождение (не работают на одном порту или на одних и тех же хостах). Два URL-адреса имеют одинаковое происхождение, если у них одинаковые схемы, хосты и порты.

ПРИМЕР: Ваш URL-адрес C# https://localhost:44391 отличается от URL-адреса вашего веб-приложения.

Во-первых, чтобы убедиться, что вы получаете ошибку из-за вашего api c#, а не из-за внешнего api, закомментируйте код запроса внешнего api в своем действии и верните что-то непосредственно из вашего api в веб-приложение. (Если ошибка вызвана внешним Api, этот внешний api должен обработать это, чтобы разрешить доступ к другим источникам.)

Если вы получаете ошибку из-за вашего api c#, а не из-за внешнего api, один из способов сделать это-включить CORS в вашем приложении C# WebAPI. Вы можете включить CORS для каждого действия, для каждого контроллера или глобально для всех контроллеров веб-API в вашем приложении.

Вы можете установить этот пакет nuget в свое приложение C# API:

 Microsoft.AspNet.WebApi.Cors
 

В App_Start/WebApiConfig.cs добавьте этот код в WebApiConfig.Способ регистрации:

 config.EnableCors();
 

Затем добавьте атрибут [EnableCors] в класс TestController вместе с URL-адресом веб-приложения.

Пример: если URL-адрес вашего веб-приложения является локальным хостом:3000, добавьте его в исходные файлы, как показано ниже.

 [EnableCors(origins: "http://localhost:3000", headers: "*", methods: "*")]
public class YourController : ApiController {
    // Your methods...
}
 

Теперь запрос AJAX от вашего веб-клиента должен работать. Все методы GET, PUT и POST разрешены.

Для получения более подробной информации о том, как включить CORS и как это работает: Включите перекрестные запросы в ASP.NET Веб-API 2