Angular App 中 proxy.conf.json 的 CORS 问题答案

【问题标题】：CORS issue with proxy.conf.json in Angular AppAngular App 中 proxy.conf.json 的 CORS 问题
【发布时间】：2018-05-12 04:46:24
【问题描述】：

我在 Stack Overflow 上看到过其他类似的问题，但到目前为止，还没有什么对我有任何帮助。

我有一个 Angular 应用程序服务于 http://localhost:4200。我有一个后端http://localhost:8080/myApp/

我正在尝试通过以下调用设置从前端到达后端：

public getPeople(): Observable<PeopleModel[]> {
    return this.http
        .post(API_URL + '/getPeopleDetails', {})
        .map(response => {
            const people = response.json();
            console.log(people);
            return partners.map((people) => new PeopleModel(people));
        })
        .catch(this.handleError);
}

API_URL 设置为http://localhost:8080/myApp

我的代理配置如下所示：

{
    "/myApp/*": {
        "target": "http://localhost:8080/myApp",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite" : {"^/myApp" : "http://localhost:8080/myApp"}
    }
}

我的 package.json 有以下内容：

"start": "ng serve --proxy-conf proxy.conf.json",

我在尝试运行应用程序时收到的错误是 CORS 错误和 403。

Failed to load http://localhost:8080/myApp/getPeopleDetails: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

如果有任何帮助，我将不胜感激。谢谢！

【问题讨论】：

你的“后端”是什么？
定义了多个端点的 Spring Boot 应用程序

标签： angular proxy

【解决方案1】：

在与 package.json 文件平行的应用程序根目录下，创建一个新文件
proxy.config.json

{
"/api*": {
    "target":"http://localhost:8080",
    "secure":false,
    "logLevel":"debug"
    }
}

现在在您的 package.json 脚本中：{}，将以下 flax 文件名为 proxy.config.json 添加到 start"

{
"name":"xyz",
"version":"1.0.0",
"license":"MIT",
"angular-cli": {},
"scripts": {
    "start":"ng serve --proxy-config proxy.config.json",
    "test":"ng test"
}

}

希望这对你有用。

【讨论】：

不幸的是，我已经拥有了所有这些，所以它对尝试让代理工作没有任何帮助。
您是否在企业防火墙后面？
给我时间到明天，我也处理了这个长回来。让我看看我的配置，我会回复你。
@RunFranks525 我刚刚检查过。我刚刚在根 .typingsrc 获得了一个文件，并具有 { "rejectUnauthorized": false, "registryURL": "api.typings.org", "httpProxy": "http proxy", "httpsProxy": "https proxy", }这对我有用。还将代理放在 .npmrc 文件中。

【解决方案2】：

看起来问题是选项应该是“--proxy-config”，而不是“开始”中的“--proxy-conf”：“ng serve --proxy-conf proxy.conf.json”

【讨论】：