java rest 调用获取 url net::ERR_FAILED

Question

我正在写一个如下的休息电话

authenticationService(username: string, password: string) {
    debugger;
    let params = new HttpParams();
    params = params.append('username', username);
    params = params.append('password', password);
    return this.http.get(`http://localhost:8080/api/v1/basicauth?`,{params},
      ).pipe(map((res) => {
        this.username = username;
        this.password = password;
      }));
  }

从春季启动结束，我正在使用@RequestParams，如下所示

@GetMapping(path = "/basicauth")
    public AuthenticationBean helloWorldBean(@RequestParam(name = "username") String username,@RequestParam(name = "password") String password) {
        String status = authenticationService.isUserAuthenticated(username, password);
             return new AuthenticationBean("You are not authenticated");
    }

我收到类似

的错误

![this ]1

请帮我解决这个问题。谢谢：）

Answer 1

您可以使用 Angular 开发服务器提供的内置代理选项。更多信息请参考official documentation。

在 src 文件夹中创建 proxy.config.json 并添加以下内容：

src/proxy.config.json

{
    "/api": {
        "target": "http://localhost:8080",
        "secure": false,
        "changeOrigin": true
    }
}

然后在 AuthenticationService 文件中，修改您的 HTTP 调用如下：

this.http.get<any>('/api/v1/basicauth', { params }).subscribe();

现在使用以下标志运行您的 Angular 应用程序：

ng serve --proxy-config src/proxy.config.json

替代方法

angular.json

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.config.json"
    },
...

现在您可以像往常一样使用不带 --proxy-config 标志的 ng serve 命令。

注意

1. 现在您可以调用 localhost:8080 服务器公开的任何端点，而无需如上所示的主机名，它会起作用。但请注意，这仅适用于开发设置/工作流程。

2. 在像生产这样的高级环境中，您必须从与后端服务器相同的域托管 Angular 应用程序以避免 CORS 错误。但请注意，这不是克服 CORS 错误的唯一可用选项。

3. 从您的代码 sn-p 中可以看出，您不需要添加“？”在 URL 的末尾，因为如果您设置了 params 对象，它将由 HttpClient 自动生成。

希望这会有所帮助...干杯，编码愉快！！！