在下面的代码中，AngularJS $http方法调用URL，并提交xsrf对象作为“Request Payload”(在Chrome调试器网络选项卡中描述)。jQuery $。ajax方法做同样的调用，但提交xsrf作为“表单数据”。
如何让AngularJS将xsrf作为表单数据而不是请求有效载荷提交?
var url = 'http://somewhere.com/';
var xsrf = {fkey: 'xsrf key'};
$http({
method: 'POST',
url: url,
data: xsrf
}).success(function () {});
$.ajax({
type: 'POST',
url: url,
data: xsrf,
dataType: 'json',
success: function() {}
});
当前回答
这就是我所做的我的需要，在那里我需要发送登录数据API作为表单数据和Javascript对象(userData)正在自动转换为URL编码的数据
var deferred = $q.defer();
$http({
method: 'POST',
url: apiserver + '/authenticate',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
transformRequest: function (obj) {
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
},
data: userData
}).success(function (response) {
//logics
deferred.resolve(response);
}).error(function (err, status) {
deferred.reject(err);
});
这就是我的用户数据
var userData = {
grant_type: 'password',
username: loginData.userName,
password: loginData.password
}
其他回答
对于Symfony2用户:
如果你不想改变javascript中的任何东西，你可以在symfony app中做这些修改:
创建一个扩展Symfony\Component\HttpFoundation\Request类的类:
<?php
namespace Acme\Test\MyRequest;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\ParameterBag;
class MyRequest extends Request{
/**
* Override and extend the createFromGlobals function.
*
*
*
* @return Request A new request
*
* @api
*/
public static function createFromGlobals()
{
// Get what we would get from the parent
$request = parent::createFromGlobals();
// Add the handling for 'application/json' content type.
if(0 === strpos($request->headers->get('CONTENT_TYPE'), 'application/json')){
// The json is in the content
$cont = $request->getContent();
$json = json_decode($cont);
// ParameterBag must be an Array.
if(is_object($json)) {
$json = (array) $json;
}
$request->request = new ParameterBag($json);
}
return $request;
}
}
现在使用app_dev.php中的类(或您使用的任何索引文件)
// web/app_dev.php
$kernel = new AppKernel('dev', true);
// $kernel->loadClassCache();
$request = ForumBundleRequest::createFromGlobals();
// use your class instead
// $request = Request::createFromGlobals();
$response = $kernel->handle($request);
$response->send();
$kernel->terminate($request, $response);
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
请付款! https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs
这并不是一个直接的答案，而是一个略有不同的设计方向:
不要将数据作为表单发布，而是作为JSON对象直接映射到服务器端对象，或者使用REST风格的路径变量
现在我知道这两个选项都不适合您的情况，因为您试图传递一个XSRF键。像这样把它映射成一个路径变量是一个糟糕的设计:
http://www.someexample.com/xsrf/{xsrfKey}
因为本质上你会想要传递xsrf密钥到其他路径，/login， /book-appointment等，你不想弄乱你漂亮的URL
有趣的是，将它作为对象字段添加也不合适，因为现在你传递给服务器的每个json对象都必须添加字段
{
appointmentId : 23,
name : 'Joe Citizen',
xsrf : '...'
}
您当然不希望在服务器端类上添加另一个与域对象没有直接语义关联的字段。
在我看来，传递xsrf密钥的最佳方式是通过HTTP报头。许多xsrf保护服务器端web框架库都支持这一点。例如，在Java Spring中，您可以使用X-CSRF-TOKEN头传递它。
Angular出色的将JS对象绑定到UI对象的能力意味着我们可以摆脱一起发布表单的做法，而是发布JSON。JSON可以很容易地反序列化为服务器端对象，并支持复杂的数据结构，如映射、数组、嵌套对象等。
如何在表单有效负载中发布数组?也许是这样的:
shopLocation=downtown&daysOpen=Monday&daysOpen=Tuesday&daysOpen=Wednesday
或:
shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday
都是糟糕的设计。
完全回答(从angular 1.4开始)。你需要包含去依赖$httpParamSerializer
var res = $resource(serverUrl + 'Token', { }, {
save: { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
});
res.save({ }, $httpParamSerializer({ param1: 'sdsd', param2: 'sdsd' }), function (response) {
}, function (error) {
});
我取了一些其他的答案，并使一些东西更干净，把这个.config()调用放在你的angular。模块在你的app.js:
.config(['$httpProvider', function ($httpProvider) {
// Intercept POST requests, convert to standard form encoding
$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
$httpProvider.defaults.transformRequest.unshift(function (data, headersGetter) {
var key, result = [];
if (typeof data === "string")
return data;
for (key in data) {
if (data.hasOwnProperty(key))
result.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
}
return result.join("&");
});
}]);
