By Abifoluwa Oni


2019-03-14 20:01:48 8 Comments

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)?

3 comments

@Anjil Dhamala 2019-03-14 20:23:10

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.

@hiLorena 2019-03-14 20:13:37

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 :)

@Máté Antal 2019-03-14 20:04:02

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

Related Questions

Sponsored Content

0 Answered Questions

0 Answered Questions

Angular Local Websocket Listener CORS Header

1 Answered Questions

Angular: How to set proxy to avoid CORS error

  • 2019-02-01 06:33:09
  • pupil
  • 48 View
  • 1 Score
  • 1 Answer
  • Tags:   angular nginx cors

1 Answered Questions

[SOLVED] Http Request to a local node server from local angular project CORS ERR

0 Answered Questions

CORS policy error with Angular, Springboot and OAUTH

16 Answered Questions

1 Answered Questions

[SOLVED] CORS issue with proxy.conf.json in Angular App

  • 2017-11-28 16:30:53
  • RunFranks525
  • 3020 View
  • 0 Score
  • 1 Answer
  • Tags:   angular proxy

1 Answered Questions

2 Answered Questions

[SOLVED] PHP Slimframework CORS

Sponsored Content