angular的httpClient中添加多个请求头问题

时间:2024-03-14 19:47:48

在使用angular的httpClient模块中,post提交需要设置请求头。

初始设置如下:

const httpOptions = {
	  headers: new HttpHeaders({
		    'Content-Type':  'application/json'
	  })
};

因为后台使用的是c# web api,如果这样设置的话,谷歌浏览器可以登录成功,但是其他浏览器比如IE、火狐登录出错。错误如下:
angular的httpClient中添加多个请求头问题
angular的httpClient中添加多个请求头问题

通过上面的报错信息,刚开始以为是跨域的问题,以为跨域也有兼容性问题,可后来发现不是的。而是请求头的content-type错误信息问题。

解决办法

添加多个请求头参数

httpOptions = {
        headers: new HttpHeaders().set('Content-Type', 'application/json')
        .set('Content-Type', 'application/x-www-form-urlencoded')
    };

因为:‘Content-Type’, ‘application/json’ 只对Chrome浏览器和电脑自带的Edge有效。其他的无效。

而:‘Content-Type’, 'application/x-www-form-urlencoded’对火狐和IE有效。

综上所述:设置多个请求头就可以解决问题