angular2: origin 'http://localhost:3000' 因此不允许访问答案

【问题标题】：angular2: origin 'http://localhost:3000' is therefore not allowed accessangular2: origin 'http://localhost:3000' 因此不允许访问
【发布时间】：2017-03-19 21:47:46
【问题描述】：

我有一个 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)。当我通过可浏览的 api 点击http://127.0.0.1:8000/api/shopping-cart/show/ 时，它给了我

{"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:true} 那么它不会发送 sessionid 或 csrftoken 并返回 {} 但错误消失了。我做错了什么？

【问题讨论】：

标签： django angular

【解决方案1】：

AFAIK 如果您使用 withCredentials: true，则不能将 * 用于 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> | *
origin 参数指定可以访问资源的 URI。浏览器必须强制执行此操作。对于没有凭据的请求，服务器可以指定“*”作为通配符，从而允许任何来源访问资源。

【讨论】：

好的，我在哪里以及如何在我的请求中添加这个？
请求中没有什么可做的。浏览器在来自服务器的响应中的 resposne 标头中期望这一点。我不知道 Django 以及如何配置它。

【解决方案2】：

在我的 Django 设置中，我必须添加：

CORS_ALLOW_CREDENTIALS= True

【讨论】：

【解决方案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 之前

【讨论】：

【解决方案4】：

你可以使用angular2集成代理。

创建 proxy.conf.json 文件
在 proxy.conf 中写入：

{ "/api/shopping-cart/": { "目标": "http://localhost:8000", “安全”：假 } }
在您的 package.json 中将“开始”脚本更改为： "start": "ng serve --proxy-config proxy.conf.json"
在命令行中运行“npm start”

【讨论】：