使用Django，Angular和Gulp時處理CORS

Question

我有一個基於Django構建的項目，並使用AngularJS 1處理前端。 此外，我正在嘗試使用Gulp，以便可以享受一些瀏覽器同步功能。 以下是我用來啟動Gulp服務器的代碼，但同時使用Django服務器作為代理。

gulp.task('browser-sync', function() {
browserSync.init({
    proxy: "localhost:8000"
});
});

但是我遇到了CORS問題。 我收到的錯誤消息如下：

XMLHttpRequest無法加載http：// localhost：8000 / static / js / data.json 。 所請求的資源上沒有“ Access-Control-Allow-Origin”標頭。 因此，不允許訪問源' http：// localhost：3000 '。

有問題的data.json文件是我正在用作前端開發的數據源的文件，因為我尚未創建后端。

這是我如何使用Angular的$ HTTP從JSON文件獲取數據的示例：

marksApp.factory('getSubjectsService', ['$http',function($http){
return {
    getSubjectNames : function(stdNum){
        return $http.get('http://localhost:8000/static/js/data.json')
        .then(function(data){
            return data.data;
        });
    }
};
}]);

Answer 1

您需要將CORS標頭添加到Django響應中。

有一個流行的Django應用程序django-cors-headers可以簡化該過程。 檢查https://github.com/ottoyiu/django-cors-headers

Answer 2

我正在使用http-proxy-middleware進行代理。

我在這里有一個django rest框架：

url(r'^api/', include(router.urls)),

和gulp代理在這里：

var proxyMiddleware = require('http-proxy-middleware');
..snip..
server.middleware = proxyMiddleware('/api', {target: 'http://localhost:8000', changeOrigin: true});

在我的情況下，結果是localhost：3000 / api替代localhost：8000 / api，因此您不需要CORS標頭。

這樣的事情應該為您工作：

$http.get('/static/js/data.json')

server.middleware = proxyMiddleware('/static', {target: 'http://localhost:8000', changeOrigin: true});

祝好運。

參見： https : //github.com/chimurai/http-proxy-middleware/blob/v0.9.0/README.md