Problem CORS with angular and glassfish

0

I have several days with a problem of CORS , I have my back in an api Rest in Glassfish (JavaEE), and the Angular app consumes that api, evidently they are in different servers so it is necessary the Access-Control-Allow-Origin statement in the responses of the Back, but the only verb that answers me is GET, the rest of the verbs return an error like this, in this case I am trying a PUT :

  

Cross-origin request blocked: The same source policy does not allow reading remote resources in link . (Reason: CORS header 'Access-Control-Allow-Origin' not present)

If you realize, the verbs that fail are all those that receive data on the server, I am using POSTMAN to test my apis, in POSTMAN all the verbs work fine, but when I try to use the Verbs with Angular then gives me the error of CORS in all the verbs that are not GET.

I'm using HttpClient from Angular5 , I'm not using frameworks in the back, I'm using Netbeans.

Please some idea what may be happening.

    
asked by Ricardo Gabriel 30.05.2018 в 23:55
source

3 answers

0

What you describe points to that you have not enabled the CORS in the application on the server (service), this is resolved by enabling it (obviously: P), for this, if you are using JEE, I can refer you to this blog :

  

The next dependency in a WAR installs and configures CORS   Automatically:

<dependency>
  <groupId>com.airhacks</groupId>
  <artifactId>jaxrs-cors</artifactId>
  <version>0.0.2</version>
  <scope>compile</scope>
</dependency>
     

CORS is an opensource project and licensed with apache:    link

If you do not use Maven, try downloading the JAR from here and put it in the lib folder of the Glassfish.

    
answered by 01.06.2018 в 15:17
0

One solution is to use a reverse proxy:

You have a server for your static content, that in production can be an Apache or a Nginx, in development it is the one that provides Angular CLI, that you execute by command line through

ng serve

On the other hand, you have your JEE server (Glassfish, JBoss, Tomcat ...), generally listening on port 8080. In your case, wait for the requests in the URL

http://localhost:8080/SupplyChainCinco/api/

Well, in your Angular project, in the same directory where the file package.json and angular-cli.json are, you can create a file called proxy.conf.json with the following content:

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

And then, when you want to run the server in development, you write:

ng serve --proxy-config proxy.conf.json

What does it do? So all calls whose URLs are similar to http:localhost:4200/api/<lo_que_sea> are redirected to http://localhost:8080/SupplyChainCinco/api/<lo_que_sea> .

The advantages of this configuration (and a similar one in production) are the following:

  • Both in production and in development you will use the same URLs! Since the Angular applications define their base (see HTML tag <base> ) as the address from where all the javascript is loaded, you can define the calls in your Service classes without complete addresses, something like that is enough:

    this.http.get<MisDatos>('/api/datos/');
    
  • For the browser the scripts share domain with the AJAX calls, therefore you save implementing CORS.

  • You can mount both servers on the same machine and virtually sharing the same IP and port, which simplifies the configuration of the firewall, router and other elements.
  • It is always smarter that both the back-end and the front-end are served homogeneously.
answered by 01.06.2018 в 22:39
0

The browser blocks by default the JS requests that do not provide the same origin. The simplest solution when you are developing is to use a plugin for the browser, in chrome there is one called CORS, with this you avoid that error. link

When your site goes to production they must be within the same domain or configure the server to accept requests from the domain where the frontend will be hosted.

    
answered by 28.06.2018 в 00:29