開始為基於Django REST API的系統開發客戶端（CORS錯誤）？

Question

我已經在Django REST框架中開發了一些API函數，現在我想開發一些客戶端表單/ API調用來進行匹配。 OK，輸入以下命令后，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標頭“ Access-Control-Allow-Origin”缺失）。

然后我想，如果我使用Apache在本地服務頁面（Django服務器仍處於開發模式），則其起源至少是相同的，但這會產生相同的錯誤。 我猜這是因為端口不同。 我知道可以將Django設置為允許其他來源，但是對於客戶端（例如，基於Web的電話應用程序）如何工作，我感到困惑。 如果頁面是本地存儲在電話中（也許是加密的），而不是存儲在另一個域中，那不是最好的做法嗎？還是不安全？ 解決此問題的常用方法是什么？

（更新）我通過以下方式安裝了中間件：

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。