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

本是古典何须时尚 2022-02-17 14:20 135阅读 0赞

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

初始设置如下：

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

因为后台使用的是c\# web api，如果这样设置的话，谷歌浏览器可以登录成功，但是其他浏览器比如IE、火狐登录出错。错误如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

通过上面的报错信息，刚开始以为是跨域的问题，以为跨域也有兼容性问题，可后来发现不是的。而是请求头的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有效。

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20220217/96a5cc7fc0f341f9bc61977a9843a2d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20220217/ada52964a93d4f7a9adbeac40aaf912d.png