在本地運行的Angular服務器上運行的調用Django API

我正在學習Django和Angular。在本地運行的Angular服務器上運行的調用Django API

我已經安裝Django的API上http://serverip:8666/athletics/

我已經創建了我從我的本地機器上運行的小角度應用後端上。

在我的角度應用程序下面的代碼：

$scope.list_athletes = function(){ 

    console.log('hey'); 

    $http 
     .get('http://serverip:8666/athletics/') 
     .success(function (result) { 

      console.log('success'); 

     }) 

}

生成錯誤：

XMLHttpRequest cannot load http://serverip:8666/athletics/ . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://127.0.0.1:65356 ' is therefore not allowed access.

是什麼原因導致這個錯誤？我如何解決它，以便我可以從我的本地Angular應用程序訪問Django API？

來源

2015-11-04 user1283776

您遇到的問題與未啓用CORS有關。

作爲一項安全策略，JavaScript無法在瀏覽器中運行時跨域請求請求。這是爲了防止不可信的代碼在用戶不知情的情況下執行。解決方法是通過白名單域來啓用CORS。

您需要設置訪問控制允許來源響應報頭在你的反應就像這樣：

def my_view(request): 
    data = json.dumps({'foo':'bar'}) 
    response = HttpResponse(data) 
    response['Access-Control-Allow-Origin'] = 'http://127.0.0.1:65356' 
    return response

這將使你的角度應用CORS。您甚至可以將django-cors-headers添加到您的項目中，以便爲您實施此功能。這可以添加到任何Django響應對象，例如django.http.repsonse.HttpResponse。因爲您似乎在使用DRF響應對象，所以您可能需要使用類似於

return Response(serializer.data, headers={'Access-Control-Allow-Origin': 'http://127.0.0.1:65356'})

來設置您的響應標頭。

您還應該查看this site瞭解更多關於如何在您的web應用程序中啓用CORS的信息。

來源

2015-11-04 16:06:33

我應該在哪裏添加該行？它在Django應用程序中嗎？我在我的簡單Angular應用程序中只有一個響應。它是「返回響應（serializer.data）」 – user1283776

看起來像django-rest-framework的Response對象，所以你可以嘗試'返回響應（serializer.data，headers = {'Access-Control-Allow-Origin'：'http： //127.0.0.1:65356/'}） –

工作，謝謝！（我刪除了http：之後的空格和端口號之後的空格。） – user1283776

你有沒有做過settings.py部分設置

INSTALLED_APPS = (
    'corsheaders', 
) 
MIDDLEWARE_CLASSES = (
    'corsheaders.middleware.CorsMiddleware', 
) 
CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:65356' 
)

而且還包括CORS_ALLOW_CREDENTIALS，CORS_ALLOW_HEADERS設置

來源

2015-11-05 07:40:20 AceLearn

上一個答案有效。我還沒有完成你的建議。這些設置是否是替代解決方案？ – user1283776

是的。這是您必須在設置中添加的重要配置，以允許前端或其他域訪問您的後端。 – AceLearn

我無法讓它工作。使用你提出的方法，我得到了一個錯誤消息：「XMLHttpRequest無法加載......沒有'Access-Control-Allow-Origin'標題出現在被請求的資源上，Origin ...因此不被允許訪問。 – user1283776

在本地運行的Angular服務器上運行的調用Django API

回答

相關問題