CODEWITHSUNDEEP
angularrestpostpostmanhacker-news-api
Gabriele Picco
Gabriele Picco

Reputation: 537

Check login credentials of remote website with Angular

I'm creating an interface for hackers news with angular 7. Normally I use the public APIs available, but for login services they are not available.

I'm trying to make a POST call, as done by an OpenSource Android Client app for HN, specifically in this file: https://github.com/hidroh/materialistic/blob/master/app/src/main/java/io/github/hidroh/materialistic/accounts/UserServicesClient.java to the url https://news.ycombinator.com/login , setting the username, password and redirect as parameters.

Unfortunalty my request is blocked by the CORS policy.

I performed the test with Postman and instead works perfectly.

This is my code:

const payload = {
  'acct': 'username',
  'pw': 'password',
  'goto': 'news'
};

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE, HEAD',
    'Access-Control-Allow-Headers': 'X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept',
    'Access-Control-Allow-Access-Control-Max-Age': '1728000',
  })
};

console.log('Try login');
this.http.post('https://news.ycombinator.com/login', payload, httpOptions)
  .pipe(
    tap(
      data => console.log(data),
      error => console.log(error)
    )
  ).subscribe(result => console.log(result));

how could I solve?

Upvotes: 1

Views: 1156

Answers (3)

Gabriele Picco
Gabriele Picco

Reputation: 537

The solution for CORS problems is to use a proxy, for angular, in development, you can use the Angular CLI server as a proxy (https://stackoverflow.com/questions/50021126/implementation-of-proxy-server-in -angular4-5? rq = 1).

This is my proxy.conf.json:

{
  "/hackernews/*": {
  "target":  {
      "host": "news.ycombinator.com",
      "protocol": "https:",
      "port": 443
  },
  "secure": false,
  "logLevel": "info",
  "changeOrigin": true,
  "pathRewrite": {"^/hackernews" : ""}
  }
}

Edit "start" of your package.json to look below

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

Unfortunately for the actual build there is no such simple solution, a proxy can be specified on the production server, depending on the server used.

Upvotes: 0

Jayoti Parkash
Jayoti Parkash

Reputation: 878

I am facing the same issue while making a request from web domain to web API domain and resolved the same in the following way:

  1. Add the following configuration in the web api configuration file to enable HTTP request and to allow customer header : enter image description here

  2. Create an XML file with name crossdomain.xml and add this file at the root location of the web or app project. enter image description here

  3. Also, add the following configuration in the configuration file of web or app project: enter image description here

This will resolve the cross-domain issue.

Upvotes: 0

Shashank Raj
Shashank Raj

Reputation: 106

You cannot make an ajax call to a server with CORS. The browser checks the CORS policy of the server.

An Android/IOS app is not a browser it can make the call without being blocked.

If you have your own server, you can make the request to your server which in turn will make a request to Harker Ranks server's and return the response to your Angular app.

Get the page using curl request. Replace acct and pw with your credentials.

curl -L -X POST \
  https://news.ycombinator.com/login \
  -H 'Access-Control-Allow-Headers: X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -H 'cache-control: no-cache' \
  -d 'acct=username&pw=password&goto=%20news'

Upvotes: 1

Related Questions