如何在没有服务器端代码的情况下使用 Web API,只使用 Ajax

Posted

技术标签:

【中文标题】如何在没有服务器端代码的情况下使用 Web API,只使用 Ajax【英文标题】:How to consume Web API without server side code, using only Ajax 【发布时间】:2017-11-08 19:16:01 【问题描述】:

我在我的主机文件中添加了以下两个主机条目:

127.0.0.1 na_api.com

127.0.0.1 na_upload.com

127.0.0.1 na_api.com 用于从数据库中检索一些数据并返回 JSON,而127.0.0.1 na_upload.com 是使用 API 的网站。

目前,我有以下 Ajax 调用,用于调用 API 并获取一些数据。这是 Ajax 调用:

this.ajaxRetrieve = function (url, data, onSuccessCallback) 
    $.ajax(
        url: url,
        data: data,
        type: 'GET',
        crossDomain: true,
        onsuccess: function (result) 
            onSuccessCallback(result);
        
    );

上面输出如下错误:

请求的资源上没有“Access-Control-Allow-Origin”标头

如果不需要像 .Net 之类的后端服务器端代码,我该如何解决这个问题?

【问题讨论】:

这可能对你有用***.com/questions/20035101/… 刚刚更新了我的代码以使用 CORS 示例,我仍然遇到同样的问题 【参考方案1】:

我终于在this 文章中找到了适合我的东西。

我将以下内容添加到我的 Web API 的 Web.config 文件的 <syetm.webServer> 部分

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

这是我用来发出请求的 Ajax 调用:

$.ajax(
        url: url,
        data: data,
        type: 'GET',
        async: false,
        success: function(result) 
            onSuccessCallback(result);
        ,
        error: function(xhr, status, error) 
            onErrorCallback(xhr, status, error);
        
    );

【讨论】:

【参考方案2】:

使用 JSONP

$.ajax(
                                url: url,
                                type: 'GET',
                                crossDomain: true,
                                contentType: "text/json",
                                dataType: "jsonp",
                                success: function (data)  // ,
                                error: function (xhr, status, error)  
                          );

【讨论】:

以上是关于如何在没有服务器端代码的情况下使用 Web API,只使用 Ajax的主要内容,如果未能解决你的问题,请参考以下文章

我如何在服务器端存储不记名令牌以及验证如何在 Web API 2 中注销时删除?

如何在没有 Web Audio API 的情况下直接从 ArrayBuffer 获取通道数据?

如何在没有 Web 源模块的情况下从 Oracle APEX 中的 API 获取数据

如何在没有登录表单的情况下将摘要身份验证与 asp.net web api 和 angular js 一起使用?

如何从 couchdb 运行服务器端代码?

如何在没有任何服务器端代码的情况下借助 HTML 在 android 和 iphone 中添加新的联系人屏幕?