使用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。”

- anton2g

---

你目前在使用特定的JavaScript库吗？ - lintmouse

使用自定义标头并从文件而不是服务器运行JavaScript会导致CORS问题（无法访问来源错误）。如果您使用IE，可以解决其中的一些问题。 - Brian from state farm

HTTP错误405，方法不允许。因此将方法更改为“POST”，您无需执行字符串化，因为您的正文内容已经是字符串，并将“Content-Type”更改为“application/json”。 - Ziki

Answer 1

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

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

如果需要更多信息，请查看MDN上关于CORS的文章：MDN上的HTTP访问控制(CORS)

- Mathieu Amiot

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.
        }
    });
});

Ajax: http://api.jquery.com/jquery.ajax/

- Arthur Medeiros

---

谢谢。我尝试过了，但没有成功。我把我的代码和结果放在了问题中。 - anton2g

那个变量body，在你执行.stringify()之前已经是JSON格式了吗？ - Arthur Medeiros

抱歉，这是正确的 var body： var body = '{"method":"getViews","params":{"filter":{"operator":"and","clauses":[{"operator":"matches","value":"'+ inputValue +'"}]},"order":[{"field":"name","ascending":true}],"page":{"startIndex":0,"maxItems":5}}}'; - anton2g

Answer 3

您在此处违反了所谓的同源策略。大多数浏览器不允许脚本访问与其所在页面的主机名和端口号不同的URL。这是一项非常严格的安全策略，即使为了测试目的，也经常难以克服。

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

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

- Fluster

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); 
            } 
        });

- Mitul

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
});

- Darlan Mendonça