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

我和Angular 1有类似的问题,所以我理解如何实现,只是我错过了最后一步.

就像上次一样,为我们的应用做后端的人接受类型的请求,application/x-www-form-urlencoded就像Angular 1一样,Angular 2也会发送类型application/json.

我用ng1做的是在配置中我修改了http提供程序以在每个请求的主体上运行urlencoded.

我在ng2中看到有一个https://angular.io/docs/ts/latest/api/http/BaseRequestOptions-class.html 这个BaseRequestOptions类,我认为这个类只是为了这个唯一的文档有点not there所以我不是确定如何正确实现这一点(我也是TypeScript的新手).

我如何提供这个,以便我的每个post请求都urlencoded在最后发送(我也希望函数在主体上运行,以便它实际上变为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))

Langley.. 12

尝试这样的事情:

DefaultRequestOptions.ts

@Injectable()
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]})
]);

重要说明:确保在您将使用Http对象的组件中不再声明HTTP_PROVIDERS,或者它将覆盖您在boot.ts中注入的组件.

对于其他函数,您可以将其添加到任何@Injectable对象中,将该对象添加到组件的构造函数中,然后可以从任何组件中调用它,或者您可以尝试扩展http角度对象并覆盖post方法为了在幕后的每个帖子请求做它.

尝试这样的事情:

DefaultRequestOptions.ts

@Injectable()
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]})
]);

重要说明:确保在您将使用Http对象的组件中不再声明HTTP_PROVIDERS,或者它将覆盖您在boot.ts中注入的组件.

对于其他函数,您可以将其添加到任何@Injectable对象中,将该对象添加到组件的构造函数中,然后可以从任何组件中调用它,或者您可以尝试扩展http角度对象并覆盖post方法为了在幕后的每个帖子请求做它.