Question

这是我的服务

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');
  }

}

为什么如果我从浏览器请求我可以获取信息，当我从我的角度应用程序请求响应被锁定，因为错过了cors标头？我能从前端修好吗？

Answer 1

CORS通常是服务器端问题。服务器必须授权客户端访问它。但只要你说它在浏览器中有效，它可能已经实现了CORS。您可以使用Postman等程序进行检查以发送请求，并查看是否发生以下情况。

浏览器在您的请求被称为预检请求之前发送（或者您可以通过Postman手动发送）请求。这是为了确保服务器支持您要调用的HTTP方法。预检请求将包含原始标题：

Origin: http://foo.example

假设服务器已经实现了CORS ，它将在标题中返回：

Access-Control-Allow-Origin: *

如果存在上述行，则不应该有问题。因此，在角度应用程序中，您应该包含第一个代码段，服务器应该返回第二个代码段。如果您有权访问后端，请确保在响应中插入第二个代码段。

预检请求和响应交换看起来应该如下（查看full post）。我也从this article

中学到了很多东西

预检请求：

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

响应：

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

因此，在您的应用中，您需要包含Origin : http://your.domain类似以下请求和响应：

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]

Answer 2

CORS标题通常是后端的一部分。如果你更好地使用django

pip install django-cors-headers

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

Angular获取请求CORS

2 个答案: