Angular HTTP 帖子不接受 JSON 响应？答案

【问题标题】：Angular HTTP post not accepting JSON response?Angular HTTP 帖子不接受 JSON 响应？
【发布时间】：2019-09-23 13:29:19
【问题描述】：

我在 laravel 中创建了一个 API，并在 postman 中进行了测试，它运行良好。但是当我从角度尝试它时，它适用于返回字符串文本但不适用于 JSON 响应

我在互联网上搜索并找到设置 content-type:application/json 并尝试使用不同的方法在标题中设置内容类型，但问题仍然存在

    var obj = JSON.parse('{"email":"ab@gm.com","password":"12345678"}');
    //1st type of header
    var headers_object = new HttpHeaders().set('Content-Type', 
    'application/json');

     const httpOptions = {
         headers: headers_object
     };

    //2nd type of header
        var HTTPOptions = {
            headers: new HttpHeaders({
               'Accept':'application/json',
               'Content-Type': 'application/json'
            }),
            'responseType': 'application/json' as 'json'
         }

        return this.http.post<any>(`http://127.0.0.1:8000/api/auth/login`, obj,HTTPOptions ).subscribe(resp => {
            console.log(resp);    
        });

邮递员输出

浏览器网络请求/响应

【问题讨论】：

标签： json post angular8

【解决方案1】：

return this.http.post(http://127.0.0.1:8000/api/auth/login, obj,HTTPOptions ).map((resp: Response) => resp.json())

希望这会奏效

【讨论】：

map 或 subscribe 都命中了 api，但没有任何响应

【解决方案2】：

基本上，您发送的是 "string JSON" 而不是 JSON 对象，直接发送 Javascript 对象而不是字符串将解决您的问题，

使用下面提到的方式将 JSON 数据发布到服务器，

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

var dataToPost = {"email":"ab@gm.com","password":"12345678"}; 

this.http.post('http://127.0.0.1:8000/api/auth/login', dataToPost, httpOptions)
.subscribe(resp => {
    console.log(resp);    
});

【讨论】：

我试过了，但它不起作用。还是一样的反应。当我从 api 返回一个简单的字符串时，它可以正常工作，但不适用于 JSON。
然后检查你的控制台，它应该显示 CORS 错误
不，我已经解决了。即使是 CORS 的问题，那么返回字符串也不应该起作用
chrome 在网络选项卡中为每个 XHR 生成 2 个条目，检查第二个请求...

【解决方案3】：

这是由于 CORB。

Cross-Origin Read Blocking (CORB) 是一种算法，可以识别并在之前阻止 Web 浏览器中可疑的跨域资源加载他们到达网页。 CORB 降低了敏感泄漏的风险远离跨域网页的数据。

https://www.chromestatus.com/feature/5629709824032768

解决方案在禁用的网络安全模式下运行 chrome。这对我有用https://stackoverflow.com/a/42086521/6687186

Win+R 并粘贴

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

【讨论】：

但是如果我能够在开发时工作，在生产中它会表现得一样，不是吗？还是它（CORS）只发生在开发中？？