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

Question

我在堆栈溢出上看到了其他类似的问题，但到目前为止，还没有为我做任何事情。

我有一个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"}
    }
}

我的软件包。

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

我尝试运行该应用程序时收到的错误是CORS ONE和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.

我感谢任何帮助。谢谢！

Answer 1

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

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

现在在您的 package.json 中，在脚本中：{}，添加以下亚麻，带有文件名 proxy.config.json to 开始>

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

}

希望这对您有用。

Answer 2

看起来的问题是，该选项应为" - proxy-config"，not; quot;在"开始"中：" ng serve-proxy-conf proxy.conf.json"

Answer 3

您可能需要通过" API"的后端URL传递。在proxy.conf.json上的另一个提示：

{
  "/api/*": {
    "target":"http://localhost:3000",
    "pathRewrite": {
      "^/api": "/myApp"
    },
    "secure":false
  }
}

https://angular.io/guide/build#proxying-to-a-backend-server