0

This is my service

import { Injectable } from '@angular/core';
import { HttpModule,Http } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';

@Injectable()
export class MyDataServiceService {

  constructor(private http:Http) {}

  getData(){
    return this.http.get('http://stats.nba.com/stats/leaguedashplayerbiostats/?PerMode=Totals&Season=2016-17&LeagueID=00&SeasonType=Playoffs');
  }

}

Why If I request from the browser I can get the info and when I request from my angular app response is locked because the cors header is missed? Can I fix it from the frontend??

AFS
  • 1,433
  • 6
  • 28
  • 52
  • Possible duplicate of [How to enable CORS in AngularJs](https://stackoverflow.com/questions/23823010/how-to-enable-cors-in-angularjs) – Igor Nov 06 '17 at 18:22
  • The duplicate is valid because it has nothing to do with [tag:angular], it is a contract between the browser and the server that the calling code running in the browser must abide by. – Igor Nov 06 '17 at 18:23

2 Answers2

0

CORS is normally a server side issue. The server must authorize the client to access it. But provided that you say it works in the browser, it probably has CORS implemented. You can check by using a program like Postman to send a request, and see if the following occurs.

The browser sends (Or you can manually send via Postman) a request before your request called a preflight request. This is to make sure that the server supports the HTTP method that you are about to call. The preflight request will contain the origin header:

Origin: http://foo.example

And assuming that the server has implemented CORS, it will come back with this in the header:

Access-Control-Allow-Origin: *

If the above line is present, you should not have an issue. So, in the angular app, you should include the first code snippet, and the server should return the second snippet. If you do have access to the backend, go make sure that the second snippet is inserted in the response.

The preflight request and response exchange should look something like what follows (view full post). I also learned a lot from this article

Preflight Request:

OPTIONS /resource/foo 
Access-Control-Request-Method: DELETE 
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://foo.bar.org

Response:

HTTP/1.1 200 OK
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: https://foo.bar.org
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400

So in your app, you need to include the Origin : http://your.domain kind of like the following request and response:

GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
Origin: http://foo.example


HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61 
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

[XML Data]
0

CORS header are usually part from the back end side. if you`re using django better 

pip install django-cors-headers

https://github.com/ottoyiu/django-cors-headers

Kent Dela Cruz Fueconcillo
  • 668
  • 5
  • 15