Question

我在Django REST框架中开发了一些API函数，现在我想开发一些客户端表单/ API调用来匹配。好的，输入命令后，REST API在本地可用：

python3 manage.py runserver

我将一些HTML和JavaScript / jquery.rest放在一起，因此客户端可以使用链接到onclick事件的以下函数调用（授权）端点：

function auth()
{
  var client = new $.RestClient('http://127.0.0.1:8000/auth/');
  client.add('token');

  var client_id = 'xxx...etc';
  var client_secret = 'yyy...etc';
  var username = $('.inputUsername').val();
  var password = $('.inputPassword').val();

  request = client.token.create({
    client_id: client_id,
    client_secret: client_secret,
    grant_type: 'password',
    username: username,
    password: password
  });

  request.done(function (data, textStatus, xhrObject){
    alert('I have data: ' + data);
  });
  return false;
}

首先，也许天真地，我在浏览器中打开HTML文件，测试这个客户端功能，但是Django拒绝了错误请求：

阻止跨源请求：同源策略禁止在http://127.0.0.1:8000/auth/token/读取远程资源。（原因：CORS标题＆＃39; Access-Control-Allow-Origin＆＃39;缺失）。

然后我想如果我使用Apache在本地提供页面（Django服务器仍然处于开发模式），那么起源至少会相同，但这会产生同样的错误。我猜这是因为端口不同。我知道可以设置Django以便允许其他来源，但是如果客户端是基于网络的手机应用程序，我会对如何工作感到困惑。如果页面本地存储在手机上（可能是加密的），而不是在不同的域，或者是不安全的，那不是最好的吗？这个问题的常见解决方案是什么？

（更新）我安装了中间件：

pip install django-cors-headers

...并编辑了settings.py：

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
)

CORS_ORIGIN_WHITELIST = (
    'localhost',
)

现在控制台中没有任何内容，但Django REST框架仍然拒绝该请求：

[07/Mar/2016 23:07:00] "POST /auth/token/ HTTP/1.1" 401 27

Answer 1

我认为通常的方法是你的后端（api）将在与你的前端不同的服务器上运行，并且你发出CORS CORS个请求。因此，您必须正确设置CORS-Header。使用django-cors-headers非常简单。

#settings.py
INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
)

CORS_ORIGIN_ALLOW_ALL = True  # allows all 
# or use whitelist:
CORS_ORIGIN_WHITELIST = (
    'google.com',
    'hostname.example.com'
)

如果您仅为网站开发，则可以在同一台服务器上运行前端和后端。但如果您开发移动应用程序，则无法在手机上安装和运行django。

开始基于Django REST API的系统的客户端开发（CORS错误）？

1 个答案: