如何使Angular 2将所有请求发送为application/x-www-form-urlencoded

30 浏览
0 Comments

如何使Angular 2将所有请求发送为application/x-www-form-urlencoded

我之前在Angular 1中遇到过类似的问题，所以我知道如何实现，只是缺少最后一步。

就像上次一样，我们的应用程序的后端人员接受使用application/x-www-form-urlencoded类型的请求，Angular 2也是使用application/json类型发送请求。

在ng1中，我在配置中修改了http提供程序，以便将每个请求的body运行为urlencoded。

我在ng2中看到有一个BaseRequestOptions类，我认为它正是为此而设计的，只是文档有些不完整，所以我不确定如何正确实现（我也是TypeScript的新手）。

我应该如何提供这个功能，以便每个post和其他请求在最后发送时都是urlencoded的（我还希望该函数在body上运行，以便它真正地变成urlencoded）。

另外：为什么没有一个更简单的选项来解决这个问题，因为到现在为止，我可以看到ASP.Net和Flask（我想很多其他框架也是如此）默认都不支持application\json？

编辑：我已经创建了一个自定义函数，我在发送POST请求的每个对象上使用它，但我希望有一个更简单、更通用的解决方案。

import { URLSearchParams } from 'angular2/http';
export function urlEncode(obj: Object): string {
    let urlSearchParams = new URLSearchParams();
    for (let key in obj) {
        urlSearchParams.append(key, obj[key]);
    }
    return urlSearchParams.toString();
}

然后像这样使用它：

this.http.post('http://localhost:5000/user/auth/login', urlEncode(data))

0

1 答案

0 Comments

问题的出现原因：想要让Angular 2发送的所有请求都以application/x-www-form-urlencoded的形式发送。

解决方法：

1. 创建一个DefaultRequestOptions类，继承自BaseRequestOptions，并设置headers的Content-Type为application/x-www-form-urlencoded。

2. 在boot.ts中，使用DefaultRequestOptions类作为默认的请求选项，将其提供给Http服务，并注入HTTP_PROVIDERS。

3. 在组件中使用Http对象时，不要再声明HTTP_PROVIDERS，以免覆盖boot.ts中注入的Http对象。

具体代码如下：

// DefaultRequestOptions.ts
export class DefaultRequestOptions extends BaseRequestOptions{
    headers:Headers = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    });
}
// boot.ts
bootstrap(AppComponent,[
    HTTP_PROVIDERS,
    provide( RequestOptions, { useClass: DefaultRequestOptions } ),
    provide(Http, { useFactory:
        function(backend, defaultOptions) {
            return new Http(backend, defaultOptions); },
        deps: [XHRBackend, RequestOptions]})
]);

以上代码可以实现让Angular 2发送的所有请求都以application/x-www-form-urlencoded的形式发送。

0