Cosuming a java webservice json into Angular4

Question

I made a java webservice with Jersey and Javax.ws.rs, and at my controller a made a method that returns a list of json objects. This is the method >

@Path("chamados")
public class ChamadoController {
    @GET
    @Produces(MediaType.APPLICATION_JSON)
    @Path("/")
    public List<Chamado> listChamados(){
        Chamado c1 = new Chamado();
        c1.setId(50);
        c1.setAssunto("assunto1");
        c1.setMensagem("oi");
        c1.setStatus(Status.NOVO);

        Chamado c2 = new Chamado();
        c2.setId(20);
        c2.setAssunto("assunto2");
        c2.setMensagem("oi2");
        c2.setStatus(Status.FECHADO);

        List<Chamado> list1 = new ArrayList<Chamado>();
        list1.add(c1);
        list1.add(c2);

        return list1;
    }
}

The output when I run the project with apache and access /rest/chamados/ is this >

[{"id":50,"assunto":"assunto1","mensagem":"oi","status":"NOVO"},
 {"id":20,"assunto":"assunto2","mensagem":"oi2","status":"FECHADO"}]

My issue is when i try to print it at my angular4 project, i never done this before so im kinda lost, this how im tryng to print it >

 export class AppComponent{
     data: any = {};
     constructor(private http: Http){
         this.getData();
         this.getImages();
     }


     getData(){
         return this.http.get(this.apiURI).map((res: Response) => res.json())
     }

     getImages(){
         this.getData().subscribe(data => {
         console.log(data);
     })
  }

    private apiURI = 'http://localhost:8080/aprendendo-java-backend/rest/chamados/';             
}

This is the error I get when trying to console.log >

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/aprendendo-java-backend/rest/chamados/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Any tips on whats wrong or how should I be doing this?

Thanks in advance

HDJEMAI · Accepted Answer · 2017-10-06 23:51:30Z

1

One possible solution:

look at this documentation: Enabling Cross Origin Requests for a RESTful Web Service

Add an annotation @CrossOrigin to your java method like this:

@Path("chamados")
@CrossOrigin(origins = "http://localhost:9000")
public class ChamadoController {
    @GET
    @Produces(MediaType.APPLICATION_JSON)
    @Path("/")
    public List<Chamado> listChamados(){
        Chamado c1 = new Chamado();
        c1.setId(50);
        c1.setAssunto("assunto1");
        c1.setMensagem("oi");
        c1.setStatus(Status.NOVO);

        Chamado c2 = new Chamado();
        c2.setId(20);
        c2.setAssunto("assunto2");
        c2.setMensagem("oi2");
        c2.setStatus(Status.FECHADO);

        List<Chamado> list1 = new ArrayList<Chamado>();
        list1.add(c1);
        list1.add(c2);

        return list1;
    }
}

Change the port number (9000 port in my example) to what ever port you use in your Nodejs server or what ever web server port you have that serves your web pages.

edited Oct 6, 2017 at 23:51

answered Oct 6, 2017 at 23:37

HDJEMAI

9,84848 gold badges78 silver badges99 bronze badges

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

1 Comment

Daniel Bezerra De Menezes Over a year ago

Thanks for that link seems good, ill try making a new project from scracth using Spring, i cant just @CrossOrigin on my controller, it gives me the error "cannot find symbol", i tried adding <dependency> <groupId>com.airhacks</groupId> <artifactId>jaxrs-cors</artifactId> <version>0.0.2</version> </dependency> but it didnt work

Leandro Santana · Accepted Answer · 2017-10-06 23:54:57Z

0

Using Google Chrome try installing this "Allow-Control-Allow-Origin" extension. enter link description here

Try maybe help.

This extension causes it to fool your webservice, not reading the request as a request from localhost.

edited Oct 6, 2017 at 23:54

answered Oct 6, 2017 at 23:45

Leandro Santana

13 bronze badges

Comments

SBKDeveloper · Accepted Answer · 2017-10-07 00:02:40Z

0

Easiest way:

you can also use JsonP, you need to wrap the JSON in a function and then use the Jsonp facility in Angular.

https://angular.io/api/http/Jsonp

answered Oct 7, 2017 at 0:02

SBKDeveloper

7233 gold badges11 silver badges23 bronze badges

Comments

Vikram R · Accepted Answer · 2017-10-07 10:06:28Z

0

Same issue i had faced. i was changed @CrossOrigin(origins = "http://localhost:4200") into @CrossOrigin then its working

answered Oct 7, 2017 at 10:06

Vikram R

7764 gold badges8 silver badges27 bronze badges

1 Comment

Daniel Bezerra De Menezes Over a year ago

CrossOrigin is not recognized in my code, maybe differente jax-rs version? Mine is this one > <dependency><groupId>javax</groupId> <artifactId>javaee-web-api</artifactId> <version>7.0</version> <scope>provided</scope> </dependency>

Daniel Bezerra De Menezes · Accepted Answer · 2017-10-07 11:33:50Z

0

Thanks for the awnsers guys, i was able to do it by adding this to the end of getMethod >>

        return Response
        .status(200)
        .header("Access-Control-Allow-Origin", "*")
        .header("Access-Control-Allow-Headers", "origin, content-type, accept, authorization")
        .header("Access-Control-Allow-Credentials", "true")
        .header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD")
        .header("Access-Control-Max-Age", "1209600")
        .entity(list1)
        .build();

Not sure if this is safe tho....anyone know?

answered Oct 7, 2017 at 11:33

Daniel Bezerra De Menezes

1,7366 gold badges26 silver badges48 bronze badges

Collectives™ on Stack Overflow

Cosuming a java webservice json into Angular4

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related