由于安全原因，
我很难理解Ajax的概念。我的目标很简单，从教育机构列表中提取一个自动完成的表格。目标：用户键入"Wa大学"之类的内容，然后可能会出现"滑铁卢大学"。下面是我嵌入的红宝石的样子：
<%= f.text_field :university, :id => "university-field", :onkeydown=>"updateUniSearch()" %>
我的javascript：
function updateUniSearch() {
/*jQuery UI Autocomplete for University Search Form*/
$("#university-field").autocomplete({
dataType: "json",
source: "http://universities.hipolabs.com",
async: true,
crossdomain: true
});
};
我在这里找到了API的大学名单：https://github.com/Hipo/university-domains-list
目前，当我运行我的页面时，我得到以下错误：
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://universities.hipolabs.com/?term=university. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
我是在正确地做这件事的路上，还是在远离？同样，我只想使用自动完成来显示来自外部来源的大学列表，而不是试图找到大量的大学列表并将其保存在本地数组或javascript中。提前谢谢。
json的dataType不支持跨来源请求。请尝试jsonp（带填充的JSON）。
浏览器不允许跨域Ajax请求，除非CSP（内容共享策略）允许该域或数据源提供跨源资源共享（CORS）标头。
class ApplicationController
before_action :set_csp, if: { request.format.html? }
private
def set_csp
response.headers['Content-Security-Policy'] = "connect-src http://universities.hipolabs.com 'self'"
end
end
然而，CSP和CORS是一项相对较新的创新——在当时，实现AJAX的唯一方法是利用同源策略中的漏洞，该漏洞允许从任何域加载脚本。
这就是所谓的JSONP——您接受JSON并将其封装在javascript函数中。为了使其工作，您正在调用的API必须提供JSONP响应。
不幸的是，http://universities.hipolabs.com/search没有提供JSONP响应。
通过将脚本标记附加到DOM来加载数据——加载完成后，它会调用包装JSON的回调函数。听起来很愚蠢？是的。幸运的是，您现在很少需要使用JSONP，因为大多数有价值的API都会发送CORS头，并且CSP得到了广泛的支持。
因此，您要么只需要依赖CSP，要么通过自己的服务器代理请求。
require 'net/http'
class UniversitiesController < ApplicationController
def search
uri = URI("http://universities.hipolabs.com")
uri.query = URI.encode_www_form(params.permit(:name, :country))
res = Net::HTTP.get_response(uri)
if res.is_a?(Net::HTTPSuccess)
render json: res.body
else
head res.code.to_i
end
end
end
或者只是找到一个更好的数据源，使用CORS来允许跨域访问。