Question

有一段时间，我试图让我的本地角度构建服务用HTTPS（学习，并确保我不会遇到最终应用程序的任何SSL问题）。但是，在没有成功之后，我又回到使用ng serve，但是，我的所有AJAX请求现在都失败了。我运行一个服务于Slim API的本地VM，并进行CORS设置。但是，我开始看到以下错误：

The 'Access-Control-Allow-Origin' header has a value 'http://gamersplane.local' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

查看网络选项卡中的调用，我看到原始标题确实为null，并查看我的代码，我不会弄乱原始标题（不确定你是否可以？）。我设置了一个Authorization标题，但是那个呢？这是我的API服务：

private addToken(headers: HttpHeaders) {
    let token = localStorage.getItem('token');
    if (token) {
        headers = headers.set('Authorization', 'Bearer ' + token);
    }
    return headers;
}

private constructParams(data?: Object) {
    // Object.keys(data).reduce((params, key) => params.set(key, data[key]), new HttpParams());
    let params = new HttpParams();
    for (let key in data) {
        if (typeof data[key] !== 'object') {
            params = params.set(key, data[key]);
        } else {
            for (let oKey in data[key]) {
                params = params.set(key + '[' + oKey + ']', data[key][oKey]);
            }
        }
    }

    return params;
}


get<T = any>(path: string, data?: Object): Observable<T> {
    let headers = new HttpHeaders();
    headers = this.addToken(headers);
    return this.http
        .get<T>(environment.apiDomain + path, {
            headers: headers,
            params: this.constructParams(data)
        });
}

有什么建议吗？

Answer 1

这不是Angular问题（我认为）：您必须允许所有来源访问您的后端。只需将原始标题设置为*即可。

您还可以为通话创建代理：

<强> proxy.conf.json

{
  "/api": {
    "target": "http://1.2.3.4:5/",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

弄清楚设置，你想出来。

当你发球时，

$ ng serve --proxy-conf ./proxy.conf.json

使用代理，您的服务器（ng服务）将发出请求而不是后端，因此无需遵守跨源约束。

现在，您服务中的网址不会是

let url = 'http://1.2.3.4:5/api/'

但只是

let url = '/api/'

代理将为您处理此事。

Answer 2

显然Chrome在服务器响应302重定向时有错误，当它发出新请求时，它会将sending标头设置为null。在我的情况下，我的API响应307，所以第二，重定向的请求被设置为null。纠正307固定它（虽然这似乎是一个奇怪的问题...）

角度设置HTTP请求源为null

2 个答案: