Django、Angle、Gulpを使用する場合のCORSの処理

Question

Djangoの上に構築しているプロジェクトがあり、AngularJS 1を使用してフロントエンドを処理しています。さらに私はGulpを使用しようとしているので、ブラウザのSync機能をいくつか楽しむことができます。以下は、私が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」ヘッダーが存在しません。 Origin 'http://localhost:3000'はアクセスできません。

問題のdata.jsonファイルは、私はまだ私のバックエンドを作成していないとして、私は私のフロントエンドdevelopomentのデータのソースとして使用しています一つです。ここで

は私が角度の$ 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

あなたのDjangoのレスポンスにCORSヘッダを追加する必要があります。

簡略化することができるdjango-cors-headersという人気のあるDjangoアプリがあります。 Check https://github.com/ottoyiu/django-cors-headers

Answer 2

私はプロキシにhttp-proxy-middlewareを使用しています。

私はここにDjangoの残りのフレームワークがあります。ここに

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

そして、ゴクゴクプロキシ：3000/APIプロキシはlocalhost：8000

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

に結果を、私の場合には、localhostです/ 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