JSONP с ASP.NET Web API - PullRequest
       26

JSONP с ASP.NET Web API

135 голосов
/ 24 февраля 2012

Я работаю над созданием нового набора сервисов в ASP.MVC MVC 4 с использованием Web API.Пока это здорово.Я создал сервис и заставил его работать, и теперь я пытаюсь использовать его с помощью JQuery.Я могу вернуть строку JSON с помощью Fiddler, и, похоже, все в порядке, но поскольку служба существует на отдельном сайте, я пытаюсь вызвать ее с ошибками JQuery с помощью «Not Allowed».Таким образом, это явно тот случай, когда мне нужно использовать JSONP.

Я знаю, что веб-API является новым, но я надеюсь, что кто-то там может мне помочь.сделать вызов метода Web API с использованием JSONP?

Ответы [ 15 ]

131 голосов
/ 24 февраля 2012

Задав этот вопрос, я наконец-то нашел то, что мне было нужно, поэтому отвечаю на него.

Я столкнулся с этим JsonpMediaTypeFormatter . Добавьте его в Application_Start вашего global.asax, выполнив следующее:

var config = GlobalConfiguration.Configuration;
config.Formatters.Insert(0, new JsonpMediaTypeFormatter());

и вы можете использовать вызов JQuery AJAX, который выглядит следующим образом:

$.ajax({
    url: 'http://myurl.com',
    type: 'GET',
    dataType: 'jsonp',
    success: function (data) {
        alert(data.MyProperty);
    }
})

Кажется, это работает очень хорошо.

52 голосов
/ 03 июня 2012

Вот обновленная версия JsonpMediaTypeFormatter для использования с WebAPI RC:

public class JsonpMediaTypeFormatter : JsonMediaTypeFormatter
{
    private string callbackQueryParameter;

    public JsonpMediaTypeFormatter()
    {
        SupportedMediaTypes.Add(DefaultMediaType);
        SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/javascript"));

        MediaTypeMappings.Add(new UriPathExtensionMapping("jsonp", DefaultMediaType));
    }

    public string CallbackQueryParameter
    {
        get { return callbackQueryParameter ?? "callback"; }
        set { callbackQueryParameter = value; }
    }

    public override Task WriteToStreamAsync(Type type, object value, Stream stream, HttpContent content, TransportContext transportContext)
    {
        string callback;

        if (IsJsonpRequest(out callback))
        {
            return Task.Factory.StartNew(() =>
            {
                var writer = new StreamWriter(stream);
                writer.Write(callback + "(");
                writer.Flush();

                base.WriteToStreamAsync(type, value, stream, content, transportContext).Wait();

                writer.Write(")");
                writer.Flush();
            });
        }
        else
        {
            return base.WriteToStreamAsync(type, value, stream, content, transportContext);
        }
    }


    private bool IsJsonpRequest(out string callback)
    {
        callback = null;

        if (HttpContext.Current.Request.HttpMethod != "GET")
            return false;

        callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];

        return !string.IsNullOrEmpty(callback);
    }
}
21 голосов
/ 13 августа 2013

Вы можете использовать атрибут ActionFilterAttribute следующим образом:

public class JsonCallbackAttribute : ActionFilterAttribute
{
    private const string CallbackQueryParameter = "callback";

    public override void OnActionExecuted(HttpActionExecutedContext context)
    {
        var callback = string.Empty;

        if (IsJsonp(out callback))
        {
            var jsonBuilder = new StringBuilder(callback);

            jsonBuilder.AppendFormat("({0})", context.Response.Content.ReadAsStringAsync().Result);

            context.Response.Content = new StringContent(jsonBuilder.ToString());
        }

        base.OnActionExecuted(context);
    }

    private bool IsJsonp(out string callback)
    {
        callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];

        return !string.IsNullOrEmpty(callback);
    }
}

Затем поместите его в действие:

[JsonCallback]
public IEnumerable<User> User()
{
    return _user;
}
11 голосов
/ 17 мая 2012

Конечно, ответ Брайана правильный, но если вы уже используете форматер Json.Net, который дает вам красивые даты json и более быструю сериализацию, то вы не можете просто добавить второй форматер для jsonp, вам нужно объединить два. В любом случае, это хорошая идея, так как Скотт Хансельман сказал, что при выпуске ASP.NET Web API по умолчанию будет использоваться сериализатор Json.Net.

public class JsonNetFormatter : MediaTypeFormatter
    {
        private JsonSerializerSettings _jsonSerializerSettings;
        private string callbackQueryParameter;

        public JsonNetFormatter(JsonSerializerSettings jsonSerializerSettings)
        {
            _jsonSerializerSettings = jsonSerializerSettings ?? new JsonSerializerSettings();

            // Fill out the mediatype and encoding we support
            SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json"));
            Encoding = new UTF8Encoding(false, true);

            //we also support jsonp.
            SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/javascript"));
            MediaTypeMappings.Add(new UriPathExtensionMapping("jsonp", "application/json"));
        }

        public string CallbackQueryParameter
        {
            get { return callbackQueryParameter ?? "jsoncallback"; }
            set { callbackQueryParameter = value; }
        }

        protected override bool CanReadType(Type type)
        {
            if (type == typeof(IKeyValueModel))
                return false;

            return true;
        }

        protected override bool CanWriteType(Type type)
        {
            return true;
        }

        protected override Task<object> OnReadFromStreamAsync(Type type, Stream stream, HttpContentHeaders contentHeaders,
            FormatterContext formatterContext)
        {
            // Create a serializer
            JsonSerializer serializer = JsonSerializer.Create(_jsonSerializerSettings);

            // Create task reading the content
            return Task.Factory.StartNew(() =>
            {
                using (StreamReader streamReader = new StreamReader(stream, Encoding))
                {
                    using (JsonTextReader jsonTextReader = new JsonTextReader(streamReader))
                    {
                        return serializer.Deserialize(jsonTextReader, type);
                    }
                }
            });
        }

        protected override Task OnWriteToStreamAsync(Type type, object value, Stream stream, HttpContentHeaders contentHeaders,
            FormatterContext formatterContext, TransportContext transportContext)
        {
            string callback;
            var isJsonp = IsJsonpRequest(formatterContext.Response.RequestMessage, out callback);

            // Create a serializer
            JsonSerializer serializer = JsonSerializer.Create(_jsonSerializerSettings);

            // Create task writing the serialized content
            return Task.Factory.StartNew(() =>
            {
                using (JsonTextWriter jsonTextWriter = new JsonTextWriter(new StreamWriter(stream, Encoding)) { CloseOutput = false })
                {
                    if (isJsonp)
                    {
                        jsonTextWriter.WriteRaw(callback + "(");
                        jsonTextWriter.Flush();
                    }

                    serializer.Serialize(jsonTextWriter, value);
                    jsonTextWriter.Flush();

                    if (isJsonp)
                    {
                        jsonTextWriter.WriteRaw(")");
                        jsonTextWriter.Flush();
                    }
                }
            });
        }

        private bool IsJsonpRequest(HttpRequestMessage request, out string callback)
        {
            callback = null;

            if (request.Method != HttpMethod.Get)
                return false;

            var query = HttpUtility.ParseQueryString(request.RequestUri.Query);
            callback = query[CallbackQueryParameter];

            return !string.IsNullOrEmpty(callback);
        }
    }
9 голосов
/ 07 августа 2012

Реализация Рика Стрэла лучше всего работала для меня с RC.

6 голосов
/ 24 августа 2012

JSONP работает только с HETP GET-запросом.В веб-интерфейсе asp.net есть поддержка CORS, которая хорошо работает со всеми глаголами http.

Эта статья может быть вам полезна.

5 голосов
/ 29 октября 2012

Обновлено

public class JsonpMediaTypeFormatter : JsonMediaTypeFormatter
    {
        private string callbackQueryParameter;

        public JsonpMediaTypeFormatter()
        {
            SupportedMediaTypes.Add(DefaultMediaType);
            SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/javascript"));

            MediaTypeMappings.Add(new UriPathExtensionMapping("jsonp", DefaultMediaType));
        }

        public string CallbackQueryParameter
        {
            get { return callbackQueryParameter ?? "callback"; }
            set { callbackQueryParameter = value; }
        }

        public override Task WriteToStreamAsync(Type type, object value, Stream writeStream, HttpContent content, TransportContext transportContext)
        {
            string callback;

            if (IsJsonpRequest(out callback))
            {
                return Task.Factory.StartNew(() =>
                {
                    var writer = new StreamWriter(writeStream);
                    writer.Write(callback + "(");
                    writer.Flush();

                    base.WriteToStreamAsync(type, value, writeStream, content, transportContext).Wait();

                    writer.Write(")");
                    writer.Flush();
                });
            }
            else
            {
                return base.WriteToStreamAsync(type, value, writeStream, content, transportContext);
            }
        }

        private bool IsJsonpRequest(out string callback)
        {
            callback = null;

            if (HttpContext.Current.Request.HttpMethod != "GET")
                return false;

            callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];

            return !string.IsNullOrEmpty(callback);
        }
    }
2 голосов
/ 25 сентября 2014

К сожалению, у меня недостаточно репутации, чтобы комментировать, поэтому я выложу ответ. @Justin поднял вопрос о запуске форматера WebApiContrib.Formatting.Jsonp вместе со стандартным JsonFormatter. Эта проблема решена в последнем выпуске (на самом деле выпущен некоторое время назад). Кроме того, он должен работать с последней версией веб-API.

2 голосов
/ 19 сентября 2012

Вот обновленная версия с несколькими улучшениями, которая работает с RTM-версией веб-API.

  • Выбирает правильную кодировку на основе собственных заголовков Accept-Encoding запроса.new StreamWriter() в предыдущих примерах будет просто использовать UTF-8.Вызов base.WriteToStreamAsync может использовать другую кодировку, что приведет к искажению вывода.
  • Сопоставляет запросы JSONP с заголовком application/javascript Content-Type;предыдущий пример вывел бы JSONP, но с заголовком application/json.Эта работа выполняется во вложенном классе Mapping (ср. Лучший тип контента для обслуживания JSONP? )
  • Отказывается от создания и очистки служебной информации StreamWriter и получает непосредственно байтыи записывает их в выходной поток.
  • Вместо ожидания задачи используйте механизм ContinueWith параллельной библиотеки задач для объединения нескольких задач в очередь.

Код:

public class JsonpMediaTypeFormatter : JsonMediaTypeFormatter
{
  private string _callbackQueryParameter;

  public JsonpMediaTypeFormatter()
  {
    SupportedMediaTypes.Add(DefaultMediaType);
    SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/javascript"));

    // need a lambda here so that it'll always get the 'live' value of CallbackQueryParameter.
    MediaTypeMappings.Add(new Mapping(() => CallbackQueryParameter, "application/javascript"));
  }

  public string CallbackQueryParameter
  {
    get { return _callbackQueryParameter ?? "callback"; }
    set { _callbackQueryParameter = value; }
  }

  public override Task WriteToStreamAsync(Type type, object value, Stream writeStream, HttpContent content,
                                          TransportContext transportContext)
  {
    var callback = GetCallbackName();

    if (!String.IsNullOrEmpty(callback))
    {
      // select the correct encoding to use.
      Encoding encoding = SelectCharacterEncoding(content.Headers);

      // write the callback and opening paren.
      return Task.Factory.StartNew(() =>
        {
          var bytes = encoding.GetBytes(callback + "(");
          writeStream.Write(bytes, 0, bytes.Length);
        })
      // then we do the actual JSON serialization...
      .ContinueWith(t => base.WriteToStreamAsync(type, value, writeStream, content, transportContext))

      // finally, we close the parens.
      .ContinueWith(t =>
        {
          var bytes = encoding.GetBytes(")");
          writeStream.Write(bytes, 0, bytes.Length);
        });
    }
    return base.WriteToStreamAsync(type, value, writeStream, content, transportContext);
  }

  private string GetCallbackName()
  {
    if (HttpContext.Current.Request.HttpMethod != "GET")
      return null;
    return HttpContext.Current.Request.QueryString[CallbackQueryParameter];
  }

  #region Nested type: Mapping

  private class Mapping : MediaTypeMapping
  {
    private readonly Func<string> _param; 

    public Mapping(Func<string> discriminator, string mediaType)
      : base(mediaType)
    {
      _param = discriminator;
    }

    public override double TryMatchMediaType(HttpRequestMessage request)
    {
      if (request.RequestUri.Query.Contains(_param() + "="))
        return 1.0;
      return 0.0;
    }
  }

  #endregion
}

Мне известно о "хакерстве" параметра Func<string> во внутреннем конструкторе классов, но это был самый быстрый способ обойти решаемую проблему - поскольку в C # есть только статические внутренние классы,он не может видеть свойство CallbackQueryParameter.Передача Func в связывает свойство в лямбде, поэтому Mapping сможет получить к нему доступ позже в TryMatchMediaType.Если у вас есть более элегантный способ, пожалуйста, прокомментируйте!

1 голос
/ 10 января 2014

Вместо размещения собственной версии средства форматирования JSONP вы можете установить WebApiContrib.Formatting.Jsonp Пакет NuGet с уже реализованным (выберите версию, которая подходит для вашего .NET Framework).

Добавьте этот форматер в Application_Start:

GlobalConfiguration.Configuration.Formatters.Insert(0, new JsonpMediaTypeFormatter(new JsonMediaTypeFormatter()));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...