Angular App中proxy.conf.json的CORS问题 [英] CORS issue with proxy.conf.json in Angular App

问题描述

我在Stack Overflow上也看到了其他类似的问题，但到目前为止，还没有任何事情对我有任何帮助.

I've seen other similar issues here on Stack Overflow but so far nothings quite done anything for me yet.

我有一个用于 http://localhost:4200 的角度应用程序.我在 http://localhost:8080/myApp/

I have an angular app serving to http://localhost:4200. I have a backend at http://localhost:8080/myApp/

我正在尝试通过以下呼叫将前端设置为到达后端:

I'm trying to set reach the backend from my frontend with the following call:

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

the API_URL is set to http://localhost:8080/myApp

我的代理配置如下所示:

My proxy config looks like the following:

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

我的package.json具有以下内容:

My package.json has the following:

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

尝试运行该应用程序时收到的错误是CORS 1和403.

The error I'm receiving when trying to run the app is a CORS one and a 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.

我将不胜感激.谢谢！

推荐答案

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

At the root of your application parallel to package.json file, create a new file
proxy.config.json

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

现在在脚本的 package.json 中:{}，将以下文件名为 proxy.config.json 的亚麻添加到开始"

Now in your package.json in scripts: {}, add the following flax with file name proxy.config.json to start"

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

}

希望这对您有用.

这篇关于Angular App中proxy.conf.json的CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！