Question

我正在尝试将Proxy.conf.json与Angular应用程序一起使用Access-Control-Allow-Origin标头解决CORS策略问题。我没有使用Angular的丰富经验，在尝试了很多Google搜索之后，我在应用程序的配置下进行了以下配置，因此对我不起作用。

似乎Angular不会代理，api调用就像在代理中未指定任何内容一样。

我正在使用Node托管我的应用程序，并且我有以下命令在package.json中启动我的应用程序

"ng": "ng",
 "start": "ng serve --host 0.0.0.0 -p 8080 --proxy-config proxy.conf.json",

我的environment.ts文件具有以下参考。

"proxyService":"http://machinename:7171/esbapi/servicedetails/v1/proxyservice"

我正在使用post调用api以上

return this.http.post(environment.proxyService, jsonForPost).map((res: Response) => res.json());

我的proxy.conf.json中有以下代码。我也尝试过使用“ / esbapi / *，但仍然无法正常工作。

{
  "/esbapi/servicedetails/v1/proxyservice*" :{
     "target":"http://machinename:7171/esbapi/servicedetails/v1/proxyservice",
     "secure": false,
     "changeOrigin" : true,
     "logLevel": "debug"
    }
}

使用上述配置时，我仍然遇到CORS问题。代理似乎无法正常工作。

我也尝试了以下步骤。

在一篇文章中提到，使用固定的URL路径可能不适用于post方法，因此我也尝试更改

中的值

environment.ts

"proxyService":"/esbapi/servicedetails/v1/proxyservice"

并尝试为效果不佳的代理创建代理。

代替呼叫

"target":"http://machinename:7171/esbapi/servicedetails/v1/proxyservice"，

正在打电话

http://localhost:8080/esbapi/servicedetails/v1/proxyservice

该代码未获取代理conf文件中提供的目标。

如果我在这里做错了，请告诉我。

更多详细信息-------

启动服务器时，我可以在控制台中看到以下信息。

> ng serve --host 0.0.0.0 -p 8080 --proxy-config proxy.conf.json

** NG Live Development Server is listening on 0.0.0.0:8080, open your browser on http://localhost:8080/ **
 10% building modules 3/3 modules 0 active[HPM] Proxy created: /esbapi/servicedetails/v1/proxyservice*  ->  http://machinename:7171
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]

当我通过UI拨打电话时，控制台上会打印以下行

[HPM] POST /esbapi/servicedetails/v1/proxyservice -> http://machinename:7171/esbapi/servicedetails/v1/proxyservice

我打开了浏览器控制台，可以看到以下消息

POST http://localhost:8080/esbapi/servicedetails/v1/proxyservice net::ERR_EMPTY_RESPONSE

Answer 1

它正在打电话

http://localhost:8080/esbapi/servicedetails/v1/proxyservice

URI很好。

按如下所示proxy.conf.json编辑您：

{
  "/esbapi/servicedetails/v1/proxyservice" :{
     "target":"http://machinename:7171",
     "secure": false,
     "changeOrigin" : true,
     "logLevel": "debug"
    }
}

Answer 2

角http-> springboot http://localhost:8080
正在工作
1个springboot rest api


@RestController
@RequestMapping("/api/json_")
public class JsonController {
    @GetMapping("/data.txt")
    public String getDatatxt() {
        String returnString = "";
        try {
            // src/main/resources/data.txt
            File file1 = ResourceUtils.getFile("classpath:data.txt");
            returnString = new String(Files.readAllBytes(file1.toPath()));
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return returnString;
    }
}

2个角度HTTP服务

@Injectable({
  providedIn: 'root'
})
export class JsonHttpDataService {
  private jsonUrl = '/api/json_';
  getDatatxt(): Observable<string> {
    const str = 'data.txt';
    const url = `${this.jsonUrl}/${str}`;
    return this.http.get<string>(url);
  }
}

3个angular proxy.conf.json

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "pathRewrite": {
      "^/api": "/api"
    }
  }
}

4个结束

Proxy.conf.json对于Angular CLI无法正常工作

2 个答案: