localhost api 请求的 Http 失败响应：0 未知错误 - Angular答案

【问题标题】：Http failure response for localhost api request: 0 Unknown Error - Angularlocalhost api 请求的 Http 失败响应：0 未知错误 - Angular
【发布时间】：2019-03-21 23:15:23
【问题描述】：

我正在尝试从我的 Angular 应用程序创建与我的 Java Jetty 后端的通信。当我尝试执行我的请求时，我收到以下错误：

我在客户端的代码：（Angular 7.2.1）。我还使用 HttpInterceptor 进行身份验证，它应该可以工作。我还在使用ng serve 在开发模式下运行代码。

@Injectable({
    providedIn: 'root'
})
export class NgHydrantService {

    constructor(private http: HttpClient) {
    }
  
    public register(entity: IEntityDescription): Observable<StandardResponsePacket> {
        let packet = new RegisterEntityRequestPacket(entity);
        return this.http.post(this._apiUrl, packet.toJson())
            .pipe(
                map(value => {
                    console.log('register result:', value); //<-- never executed
                    return <StandardResponsePacket>HydrantPackage.fromJson(value)
                })
            );

    }
}

//The interceptor
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with basic auth credentials if available
        if (this.user != null) {

            const clonedRequest = request.clone({
                headers: request.headers.set('Authorization', `Basic ${this.user.getAuth()}`)
                                        .set('Accept','application/json')
            });
            //This debug line works and looks good!
            console.log('NgHydrantAuthInterceptor#intercept', clonedRequest);
            return next.handle(clonedRequest);
        }

        return next.handle(request);
    }

我在服务器端的代码：（Jetty-9.4.14.v20181114）在本地主机上运行。

public final class PacketHandler extends AbstractHandler
{
  @Override
  public void handle( String target,
                    Request baseRequest,
                    HttpServletRequest request,
                    HttpServletResponse response ) throws IOException
  {
    try
    {
        // Declare response encoding and types
        response.setContentType( "application/json; charset=utf-8" );
        // Enable CORS
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, HEAD");
        response.addHeader("Access-Control-Allow-Headers", "X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept");
        response.addHeader("Access-Control-Max-Age", "1728000");
        //... more stuff
    }
    finally
    {
        // Inform jetty that this request was handled
        baseRequest.setHandled( true );
    }
  }
}

我检查的内容：

在研究过程中，一些人提到了 CORS 的问题（这就是我在服务器端代码中添加标头条目的原因）
Postman 中的相同请求没有任何问题
服务器端没有日志

我的问题是关于在开发期间从我的服务器获取响应的可能解决方案。

【问题讨论】：

标签： java angular jetty

【解决方案1】：

您可以按照以下链接中的步骤操作吗 https://www.html5rocks.com/en/tutorials/cors/ 如需快速解决方案，请在您的 chrome 中添加以下插件 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

【讨论】：

【解决方案2】：

我能够通过将我的 Web 服务器配置设置为允许 cors 策略来解决一个可能的问题。在我的情况下，我使用 Nginx Web 服务器按照此链接中的配置https://enable-cors.org/server_nginx.html

【讨论】：