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

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

Answer 3

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

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

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

Answer 4

如果您使用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
});

Answer 5

如果要使用不同的域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); 
            } 
        });

使用Javascript调用外部API

5 个答案: