使用 Javascript 调用外部 API

Question

我需要使用 Javascript 从我的网页向外部服务器发出 POST 请求。正文和响应都是 json。我不知道如何打这个电话或使用什么工具。我该如何拨打这个电话？

这是我目前使用 jQuery 和 ajax 所做的：

var body = '{"method":"getViews","params":{"filter":{"operator":"and","clauses":[{"operator‌​":"matches","value":"'+ inputValue +'"}]},"order":[{"field":"name","ascending":true}],"page":{"startIndex":0,"maxIt‌​ems":5}}}';
var response = $.ajax({
           url: "http://" + environment + "/vizportal/api/web/v1/getViews",
           method: "post",
           dataType:'json',
           data: JSON.stringify(body),
           headers: {
            'Content-Type': 'text/plain',
            'X-XSRF-TOKEN' : XSRFToken,
            'Cookie': 'workgroup_session_id='+workgroupSessionId+';XSRF-TOKEN='+XSRFToken
           },
           success:function(response){
                alert("success");
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) { 
                alert("Status: " + textStatus); alert("Error: " + errorThrown); 
            } 
        });

它正在抛出一个警报，只显示“状态：”和“错误：”

控制台显示“XMLHttpRequest 无法加载 http://[domain]/vizportal/api/web/v1/getViews。请求的资源上不存在 'Access-Control-Allow-Origin' 标头。因此不允许访问源 'http://[domain]'。响应具有 HTTP 状态代码 405。”

Answer 1

您是呼叫目的地的所有者吗？如果是，请在服务器端实现 CORS 标头。

如果没有，您可以使用 JSONP（它绕过 CORS），或者您甚至可以实现一个您拥有的服务器端代理来路由外部请求（当然，在那里实现 CORS）。

如果您想了解更多信息，请查看 MDN 中关于 CORS 的文章：HTTP access control (CORS) on MDN

Answer 2

您可以使用 JQUERY 和 AjAX。您可以通过 post 或 get 方法向/从您的 API 发送/获取信息信息。

应该是这样的：

$("#ButtonForm").click(function(){
$.ajax({
        url:(Your url),
        dataType:'json',
        type: 'post',
        data: yourForm.serialize(),
        success:function(response){
              ** If yout API returns something, you're going to proccess the data here.
        }
    });
});

阿贾克斯： http://api.jquery.com/jquery.ajax/

Answer 3

您在这里违反了所谓的同源政策。大多数浏览器不允许脚本访问与脚本所在页面不具有相同主机名和端口的 URL。这是一项非常严格的安全策略，即使是出于测试目的，通常也很难克服。

传统上，解决此问题的最简单方法是使用您自己的网站作为代理，并通过它将请求转发到外部服务器。但是，如果您对自己的站点没有足够的控制权来实施这样的解决方案，事情就会变得更加复杂。如果你用“same-origin-policy”搜索互联网，你会发现很多关于这个话题的讨论和其他解决它的想法。

我的第一个建议是检查您的错误消息中提到的“Access-Control-Allow-Origin”，尽管我自己并不熟悉。它与最近（2014 年）被添加到 W3C 建议中的名为 CORS 的新方案有关，并且似乎在许多浏览器的最新版本中得到了广泛支持。也许我们的开发人员终于有了一些工具来解决这个恼人的问题。

Answer 4

当您想使用不同的域 ajax 调用时，您需要使用 JSONP 数据类型，这将允许浏览器进行跨域请求。

这里是 JSONP 的更多文档：https://learn.jquery.com/ajax/working-with-jsonp/

var body = '{"method":"getViews","params":{"filter":{"operator":"and","clauses":[{"operator‌​":"matches","value":"'+ inputValue +'"}]},"order":[{"field":"name","ascending":true}],"page":{"startIndex":0,"maxIt‌​ems":5}}}';
var response = $.ajax({
           url: "http://" + environment + "/vizportal/api/web/v1/getViews",
           method: "post",
           dataType:'jsonp',
           data: JSON.stringify(body),
           headers: {
            'Content-Type': 'text/plain',
            'X-XSRF-TOKEN' : XSRFToken,
            'Cookie': 'workgroup_session_id='+workgroupSessionId+';XSRF-TOKEN='+XSRFToken
           },
           success:function(response){
                alert("success");
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) { 
                alert("Status: " + textStatus); alert("Error: " + errorThrown); 
            } 
        });

Answer 5

如果您使用 jquery，请使用 .post 或 .ajax 提交

$.post(url, data, callbackSuccess, callbackError);

更多关于这些方法的信息在这里http://api.jquery.com/jquery.ajax/

示例：

var url = 'http://example.com/path/endpoint';

$.post(url, {name: 'Darlan', lastname: 'Mendonça'}, function(response){
    // callback success
}, function(response) {
    // callback error
});