Running into CORS error using Angular 7 as frontend, Backend as Java

Question

I am running two applications on my local desktop.

One is built in java which serves as the API, the other one is built in Angular which is the front-end application.

I am trying to access the backend data from Angular and I am running into an error :

Access to XMLHttpRequest at 'http://localhost:8080' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 public getMethod(): Observable<Availability[]> {
    return this.http
    .get(API_URL)
      .map(response => {

      })
      .catch(this.handleError);
  }

I am doing something like this in Angular to grab the data, and the error keeps coming up.

My question is, is this an angular error, or a Backend error(Java)?

100% back end error. Either use a reverse proxy to host your API on the same domain, or disable CORS headers. — Woohoojin, Mar 14 '19 at 20:24

score 1 · Answer 1 · answered Mar 14 '19 at 20:04

1

That's a backend error. You have to allow cors at your java backend. Check this

answered Mar 14 '19 at 20:04

Máté Antal

157
1
21

score 0 · Answer 2 · answered Mar 14 '19 at 20:13

An easy way to make http request in local is install a cors extension in your browser

As example, if you use Google Chrome install it:

Allow-Control-Allow-Origin Extension

So, enable the cors clicking in the button and make a request :)

score 0 · Answer 3 · answered Mar 14 '19 at 20:23

Create a proxy.conf.json in the root of your project next to package.json.

Here's an example.

{
    "/service/*": {
        "target": "http://localhost:8080",
        "changeOrigin": true
    }
}

Add your proxy.conf.json to serve options in angular.json. As in:

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "proxyConfig": "proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        }

That's it. Just ng serve as you usually do and you can start proxying to your server. Make sure you don't manually offer host url in your http calls. Just request from /service.

Running into CORS error using Angular 7 as frontend, Backend as Java

3 Answers3