JSONP 调用本地网络服务答案

【问题标题】：JSONP call to local webserviceJSONP 调用本地网络服务
【发布时间】：2013-11-12 22:59:16
【问题描述】：

我在 localhost:4567 上运行了一个简单的 sinatra 网络服务。该服务返回一些 JSON，如下所示...

require 'rubygems';  
require 'sinatra'; 
require 'json';

get '/example' do
  content_type :json
  { :key1 => 'value1', :key2 => 'value2' }.to_json
end

我可以打开我的浏览器并请求“http://localhost:4567/example”并返回 json 数据“{“key1”:“value1”,“key2”:“value2”}”。

我需要用这样的代码发出一个简单的 ajax 请求......

jQuery.getJSON("http://localhost:4567/example",  
    function (data) {  
        alert(data);  
    });

但我遇到了 Access-Control-Allow-Origin 问题。我想像这样使用 JSONP...

jQuery.getJSON("http://localhost:4567/example/?callback=?",  
    function (data) {  
        alert(data);  
    });

但是继续赌一个错误“Uncaught SyntaxError: Unexpected token:”。我相信这是我的本地主机端口之前的冒号。有谁知道我怎样才能让它工作？

【问题讨论】：

标签： javascript ajax sinatra jsonp

【解决方案1】：

除非请求是从同一个 URL 发出的，包括端口，否则你会遇到这个问题。

对于 JSONP，您需要像这样设置您的 Sinatra 路由：

get '/example' do
  callback = params[:callback]
  json = { :key1 => 'value1', :key2 => 'value2' }.to_json

  if callback
    content_type :js
    response = "#{callback}(#{json})" 
  else
    content_type :json
    response = json
  end
  response
end

在进行 JSONP 调用时，我个人更喜欢 ajax 调用的冗长：

$.ajax({
    url: 'http://localhost:4567/example',
    dataType: 'jsonp',
    success: function(res) {
        console.log(res);
    }
});

上面的例子几乎是来自this snippet的逐字逐句。

祝你好运！

【讨论】：