2016-07-13 77 views
3

我正在嘗試在返回json的Django應用程序和運行AJAX的客戶端之間進行跨站點通信。Django 1.9 + django-cors-headers + AJAX不工作

我使用django-cors-headers具有以下配置:

INSTALLED_APPS = [ 
    'django.contrib.admin', 
    'django.contrib.auth', 
    'django.contrib.contenttypes', 
    'django.contrib.sessions', 
    'django.contrib.messages', 
    'django.contrib.staticfiles', 
    'myapp.apps.MyAppConfig', 
    'corsheaders', 
] 

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

] 


CORS_ORIGIN_ALLOW_ALL = True 

現在我試圖讓所有的連接只是爲了讓測試。 這是我的看法:

def index(request): 
    if request.is_ajax:  
     results={} 
     results=["The password is valid"] 
     data_json=json.dumps(results) 

    mimetype="application/json" 
    return HttpResponse(data_json,mimetype) 

我試圖與裝飾@csrf_exempt了。 最後,這是我的AJAX:

$.ajax({ 
    url: "http://otherdomain.com/myapp/", 
    type: "POST", 
    crossDomain: true, 
    data :{ 
      'username': $("#myName").val(), 
     }, 
    dataType: "json", 
    success:function(result){ 
     alert(JSON.stringify(result)); 
    }, 
    error:function(xhr,status,error){ 
     alert(status); 
    } 
}); 

控制檯提示中這樣的:

的XMLHttpRequest無法加載http://otherdomain.com/myapp/。請求的資源上沒有「Access-Control-Allow-Origin」標題。 Origin'thisdomain.com'因此不被允許訪問。

任何幫助將是有用的。非常感謝你。

+0

你試過'dataType:「jsonp」'而不是'json'嗎? – valignatev

+0

嗨@valentjedi感謝您的回答。我沒有嘗試jsonp,因爲在django-cors-headers文檔中有這樣的註釋:「雖然JSON-P很有用,但它嚴格限於GET請求。」 也許我不是很好理解,有可能使用POST和jsonp? –

+0

啊我錯過了。不,這是不可能的。另外,如果你使用一些web服務器,比如apache或者nginx,你應該在那裏啓用cors,不僅僅在你的django應用中。檢查此:http://enable-cors.org/server.html – valignatev

回答

1

從您的意見,我可以認爲你忘了啓用網絡服務器/託管cors支持。當你使用Dreamhost時,你可以參考它的文檔here

同樣@YPCrumble在他的answer中表示,如果您有工作要求,您可能需要使用最新的叉Django-cors-middleware

+0

感謝@valentjedi,但這是虛擬專用服務器的文檔:/我在共享主機,我開始認爲這是不允許的。 –

+0

是的,我在類似的事情上掙扎。您仍然可以聯繫支持人員並要求他們啓動CORS。或者在最後站立只是去vps。 – valignatev

+0

非常感謝@valentjedi,這是問題所在。 –

2

Django-cors-headers是一個過時的回購 - 最後一次提交是一年前。您應該使用Django-cors-middleware這是該回購的活叉。

我不認爲你的設置有什麼問題,並期望更新軟件包將解決你的問題。這個問題很可能是由於舊版軟件包不支持Django的新版本。

編輯:

基於對您的評論的標題,你還需要add an X-CsrfToken header你的POST請求。我相信這種跨域的Ajax請求可能會產生令人誤解的CORS錯誤,即使這個問題實際上是由於缺少CSRF所致。

例如,如果您正在使用單個頁面應用程序在與應用程序服務器分離的端口上工作,則上述響應可以起作用。但是,如果這是對第三方服務器的跨源請求,則需要確保它們將支持CORS。如果他們不這樣做,則需要從服務器發出POST請求,而不是客戶端的瀏覽器。

+0

嗨@YPCrumble,謝謝你的回答。我現在使用Django-Cors中間件。 這些都是我的頭: \t訪問控制允許來源:* \t連接:保持活動 \t內容類型:應用程序/ JSON \t日期:星期三,2016年7月13日17時07分04秒GMT \t保持活動:超時= 2,最大= 100 \t服務器:Apache \t狀態:200 OK \t傳輸編碼:分塊 \t X框選項:SAMEORIGIN \t X供電,通過:的Phusion客運4.0.59 這是正確的嗎?我收到了來自AJAX的同樣的消息。 –

+0

@DavidGoudet這是一個真正的第三方API的調用?如果是這樣,他們是否發回CORS頭文件?如果沒有,你不能做一個跨域請求,你需要從你的服務器撥打電話。 – YPCrumble

+0

我不明白,真正的第三方API是什麼意思? –