Javascript 在Angular 2中提交post请求时的奇怪行为

我意识到我的头衔有点模糊，但这是我的情况。我刚刚启动了一个应用程序，我正在其中实现JWT进行身份验证。我已经设置了服务器端，可以验证它是否按预期工作

奇怪的是，当你点击按钮登录时，在Chrome和Firefox中，它只发送一次请求，而不发送请求正文。在Edge中，它提交了两次，一次是像Chrome那样提交，然后第二次几乎是在身体完好无损的情况下提交

我现在已经将登录硬编码到post请求中，以尝试尽可能多地消除这些内容

header.component.html

<ul id="links">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/census">Census</a>
    </li>
    <li>
        <button (click)="login()">Login</button>
    </li>
</ul>

Authentication.Service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'
 
@Injectable()
export class AuthenticationService {
    public token: string;
 
    constructor(private http: Http) {
        // set token if saved in local storage
        var currentUser = JSON.parse(localStorage.getItem('currentUser'));
        this.token = currentUser && currentUser.token;
    }
 
    login(usn: string, psw: string): Observable<boolean> {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        return this.http.post('http://localhost:5000/auth', JSON.stringify({ username: "email-removed", password: "password-removed" }), options)
                    .map((response: Response) => { return true; });
    }
}

这是fiddler捕获的第二个请求。当我点击chrome中的按钮时，这种情况从未发生过

POST http://localhost:5000/auth HTTP/1.1
Accept: */*
content-type: application/json
Referer: http://localhost:4200/
Accept-Language: en-US,en;q=0.8,zh-Hans-CN;q=0.7,zh-Hans;q=0.5,es-US;q=0.3,es;q=0.2
Origin: http://localhost:4200
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393
Content-Length: 58
Host: localhost:5000
Connection: Keep-Alive
Pragma: no-cache

{"username":"removed","password":"removed"}

第二个问题的答案是什么

{
  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE0ODMxNDE5NDIsImlkZW50aXR5IjoiNTg2NmJiNDkwYzE3ZDdlMzk4MTk5MWNhIiwiZXhwIjoxNDgzMTQyMjQyLCJuYmYiOjE0ODMxNDE5NDJ9.VZGBYnPKPwyR0lWdG3kR8AecbLNlYCHMC1nimAHeP3w"
}

这是另一个给你的奇怪/线索。后端是Python/rest。当我看到请求进来时，这就是我所看到的。表示选项的是空请求，表示POST的是第二个仅在Edge中发生且正确的请求。

---

看来您的跨源请求有问题。
页面主机（

localhost:4200

）与目标主机（

localhost:5000

）不同

当这种情况发生时，chrome会发出：

与上面讨论的简单请求不同，“预飞行”请求优先 通过OPTIONS方法向上的资源发送HTTP请求 其他域，以确定实际请求是否安全 发送。跨站点请求是这样预处理的，因为它们可能 对用户数据有影响

---

您从服务器得到的响应不包括所需的响应，因此chrome不会发出实际的

POST

请求。

如前所述，chrome会发出预引导请求。

---

为了绕过这个问题，您可以安装以启用CORS，并将*'Allow-Control-Allow-Origin:'添加到您的头文件中。对于我来说，django在localhost:8000上和angular2在localhost:4200上都很有效。

请确保在您调用的路由的末尾有一个尾随斜杠。因此，与其打电话

'http://localhost:5000/auth'

你的目标

'http://localhost:5000/auth/'

---

希望这能有所帮助。

您从回复中得到了什么？页面是否位于同一主机中（

http://localhost:5000

）？还是另一个？（如果端口不同，则主机不同）没有主体的端口返回一个空的200响应，包含登录名和密码的端口返回我的JWT。您能否共享在chrome开发者工具网络选项卡中查看的请求和响应？chrome仅显示没有主体的第一个请求。我会用这两个来更新这个问题。我相信你是对的。总是简单的事情让我感动。

'http://localhost:5000/auth'

'http://localhost:5000/auth/'