7

I'm trying to create a communication to my Java Jetty Backend from my Angular application. When I try to execute my request I receive the following error:

Error on request

My code on client side: (Angular 7.2.1). I'm also using a HttpInterceptor for authentication that should work. I'm also running the code in development mode with 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);
    }

My Code on server side: (Jetty-9.4.14.v20181114) that runs on localhost.

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 );
    }
  }
}

Things I checked:

  • During research some people reference problems with CORS (that's why I added the header entries in the server side code)
  • The same request in Postman works without any problems
  • There are no logs on the server side

My question is about a possible solution to get responses from my server during development.

0

2 Answers 2

2

Can you please follow the steps in below link https://www.html5rocks.com/en/tutorials/cors/ For quick solution add below plugin in your chrome https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

Sign up to request clarification or add additional context in comments.

Comments

0

i was able to solve a likely problem by setting my web server configuration to allow the cors policy. In my case, i use Nginx web server follow the configuration in this link https://enable-cors.org/server_nginx.html

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.