angular2：起源的“http：//本地主机：3000”因此不允许访问

Question

我有一个Django的后端和我已经启用跨源请求如下：

INSTALLED_APPS = [ 
    .. 
    'corsheaders', 

] 
MIDDLEWARE = [ 
    'django.contrib.sessions.middleware.SessionMiddleware', 
    'django.middleware.common.CommonMiddleware', 
    'django.middleware.csrf.CsrfViewMiddleware', 
    'django.contrib.auth.middleware.AuthenticationMiddleware', 
    'django.contrib.messages.middleware.MessageMiddleware', 
    'django.middleware.clickjacking.XFrameOptionsMiddleware', 
    'django.middleware.security.SecurityMiddleware', 
    'corsheaders.middleware.CorsMiddleware', 
] 
CORS_ORIGIN_ALLOW_ALL = True 

我还没有实现任何身份验证。我只是在尝试打一个API端点，并试图在我的Angular2前端获取数据。

我已经实现在Django后端存储我的产品（https://github.com/lazybird/django-carton）基于会话的购物车。当我打http://127.0.0.1:8000/api/shopping-cart/show/通过我可浏览API它给我

{"1":{"product_pk":1,"price":"23000.00000","quantity":3},"2":{"product_pk":2,"price":"34000.00000","quantity":7},"4":{"product_pk":4,"price":"450.00000","quantity":1}} 

然而，当我试图从我Angular2服务击中同一网址：它抛出我的错误：

XMLHttpRequest cannot load http://127.0.0.1:8000/api/shopping-cart/show/. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute. 

我的服务调用如下：

private myUrl: string = 'http://127.0.0.1:8000/api/shopping-cart/' 
    showCart(){ 

      return this.http.get(this.myUrl + 'show' + '/', {withCredentials:true}) 
      .toPromise() 
      .then(response => response.json()) 

     } 

注：如果我删除{withCredentials：真正}然后它不会发送会话ID或csrftoken并返回{}但误差消失。我究竟做错了什么？如果你使用withCredentials: true

Answer 1

AFAIK你不能使用*为Access-Control-Allow-Origin但需要http://localhost:3000代替。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin

Access-Control-Allow-Origin: <origin> | *
The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify "*" as a wildcard, thereby allowing any origin to access the resource.

Answer 2

在我的Django的设置，我不得不添加：

CORS_ALLOW_CREDENTIALS= True 

Answer 3

你中间件顺序问题。试试这个

MIDDLEWARE = [ 
    'django.contrib.sessions.middleware.SessionMiddleware', 
    'corsheaders.middleware.CorsMiddleware', 
    'django.middleware.common.CommonMiddleware', 
    'django.middleware.csrf.CsrfViewMiddleware', 
    'django.contrib.auth.middleware.AuthenticationMiddleware', 
    'django.contrib.messages.middleware.MessageMiddleware', 
    'django.middleware.clickjacking.XFrameOptionsMiddleware', 
    'django.middleware.security.SecurityMiddleware', 
] 

注意CorsMiddleware需要拿出Django的CommonMiddleware

Answer 4

之前，您可以使用angular2集成代理。

1. 在proxy.conf写创建proxy.conf.json文件

2. ：

   { “/ API /购物推车/”：{ “目标”： “http://localhost:8000”， “安全”：假 }}

3. 在你的package.json变化

   “开始” 脚本： “开始”： “NG服务--proxy-配置proxy.conf.json”

4. 在命令行中运行“故宫开始”