CODEWITHSUNDEEP
angularneo4j
APN
APN

Reputation: 1

Error in Post request to neo4j using Angular HttpClient

I am trying to make post request to neo4j database but getting error in console.

The error below:

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

and response in network tab is: 

{
  "errors" : [ {
    "message" : "Invalid username or password.",
    "code" : "Neo.ClientError.Security.AuthorizationFailed"
  } ]
}

my Type script code is:

const headers = new HttpHeaders().set('Content-Type', 'application/json');
    headers.set('Accept', 'application/json; charset=UTF-8')
    headers.set('Authorization', 'Basic ' + btoa('username=rbs:password=rbs'))
    this.httpService.post("http://localhost:7474/db/data/cypher", {
      "query": "match (a:Product) -->(b:Functions)--> (c:Subfunctions) return a,b,c"
    },
      { headers }).subscribe(
        data => {
          debugger
          this.graphdata = data;

        },
        (err: HttpErrorResponse) => {
          debugger
          console.log(err.status);
        }
      );

Upvotes: 0

Views: 139

Answers (1)

Javier
Javier

Reputation: 44

This is a CORS problem. This occurs when you try to call API or another service and you have a different host or port (https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)

Try to solve including a proxy on your Angular like this post did (https://www.codeyourthought.com/angular/proxy-to-make-http-call-in-angular/)

For my Angular Application I have one file called "proxy.conf.json" with this configuration:

{
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

I call to npm start with this:

"start": "ng serve  --proxy-config proxy.conf.json",

And my routes to backend was with this base configured on environment file "environment.ts"

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:4200/api/'
};

Another way to solve it is by installing a CORS extension in Chrome or Firefox

Hope this helps you!

Upvotes: 0

Related Questions