如何使用 http POST 方法将参数传递给 api

Question

我正在使用 HTTP POST 方法发布参数，但它显示 404 错误。相同的 API 在命令行中运行良好

我的代码是：

var dataToPost = {url:'http://google.com'}; 

    $http.post("http://appfil.es" , dataToPost)

        .success(function(serverResponse, status, headers, config) {

        })
        .error(function(serverResponse, status, headers, config) {

        }
    );

上面的代码返回错误，状态为 404.. 但下面的代码在控制台上可以正常工作。

curl -X POST http://appfil.es --data "url=http://google.com"..

请帮我解决这个问题。

谢谢

Answer 1

你的代码是正确的。

但是，您不能从客户端的浏览器跨网站进行 post 调用（XSS 安全性）

要么确保http://appfil.es 与包含您的角度代码的网页的网址相同，要么更喜欢使用$http.jsonp。

更多关于 JSONP 的信息on Wikipedia。

只要不从其 API 发送以下标头，您就无法缩短来自 appfil.es 的网址

Access-Control-Allow-Origin

确实，如果您通过在命令中添加选项-v 来打印appfil.es 返回的标头，您只会看到：

< HTTP/1.1 201 Created
* Server nginx/1.4.4 is not blacklisted
< Server: nginx/1.4.4
< Date: Mon, 29 Dec 2014 10:52:21 GMT
< Content-Type: text/html;charset=utf-8
< Content-Length: 23
< Connection: keep-alive
< Location: http://appfil.es/YVcCEA

因此，没有Access-Control-Allow-Origin。您可以从您的网站、服务器端而不是客户端（浏览器）端调用他们的 API。

Answer 2

由于您使用的是 AngularJs，您可以使用此转换器对您的数据进行编码，它将为您的所有请求集中编码：

(function () {
    'use strict';
    // Module name is handy for logging
    var id = 'app';
    // Create the module and define its dependencies.
    var app = angular.module('app', [
    ]);
    app.config(['$httpProvider', function ($httpProvider) {
        // Use x-www-form-urlencoded Content-Type
        $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
        // Override $http service's default transformRequest
        $httpProvider.defaults.transformRequest = [function (data) {
            /**
             * The workhorse; converts an object to x-www-form-urlencoded serialization.
             * @param {Object} obj
             * @return {String}
             */
            var param = function (obj) {
                var query = '';
                var name, value, fullSubName, subName, subValue, innerObj, i;
                for (name in obj) {
                    value = obj[name];
                    if (value instanceof Array) {
                        for (i = 0; i < value.length; ++i) {
                            subValue = value[i];
                            fullSubName = name + '[' + i + ']';
                            innerObj = {};
                            innerObj[fullSubName] = subValue;
                            query += param(innerObj) + '&';
                        }
                    }
                    else if (value instanceof Object) {
                        for (subName in value) {
                            subValue = value[subName];
                            fullSubName = name + '[' + subName + ']';
                            innerObj = {};
                            innerObj[fullSubName] = subValue;
                            query += param(innerObj) + '&';
                        }
                    }
                    else if (value !== undefined && value !== null) {
                        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
                    }
                }
                return query.length ? query.substr(0, query.length - 1) : query;
            };
            return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
        }];
    }]);

})();

Answer 3

在 JavaScript 变量中通过 PHP 传递 cURL 请求。

    var dataToPost = <?php
    $ch = curl_init("http://www.google.com");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $result=curl_exec($ch);
    echo $result;
    curl_close($ch);
    ?>

Document.write(dataToPost);会给你Google.com的网页