Джанго / Графен / Аполлон / django-webpack-loader / Vue: CORS / CSRF не работают вместе? - PullRequest
Новая
       31

Джанго / Графен / Аполлон / django-webpack-loader / Vue: CORS / CSRF не работают вместе?

4 голосов
/ 21 мая 2019

Я работаю над проектом, использующим Django в качестве бэкэнда, Vue в качестве внешнего интерфейса и пытаюсь реализовать Apollo / Graphene / GraphQL в качестве слоя передачи данных.Большинство из них работает, но я не разбираюсь в настройках CORS / CSRF.

(Было очень много исследований здесь. здесь , здесь и здесь .

Кто-нибудь знает, как решить проблему защиты API graphql / graphene с помощью токена CSRF? На терминале журнала django я получаю: 

Forbidden (CSRF token missing or incorrect.): /graphql/

...в то время как на консоли Vue / Js я вижу 

Cross-Origin Request Blocked: The Same Origin Policy disallows 
reading the remote resource at http://localhost:8080/sockjs-node/
info?t=1558447812102.

Вы можете увидеть (и проверить, что это с открытым исходным кодом) этот проект здесь .

http://localhost:8000, http://localhost:8000/admin и http://localhost:8000/ работают хорошо. Запрос query{menuItems{id, title, slug, disabled}} хорошо работает в графике.

settings.py: 


INSTALLED_APPS = [
    # ...
    'corsheaders',
    'rest_framework',
    'webpack_loader',
    'graphene_django',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # new
    # ...
]

CORS_ORIGIN_ALLOW_ALL = DEBUG    # (=True)

Проблеманаходится здесь: * yarn serve работает на http://localhost:8080 * ./manage.py runserver работает на http://localhost:8000, и прокси через веб-пакет на сервере Vue frontend dev.

vue.config.js: 


module.exports = {
    // The base URL your application bundle will be deployed at
    publicPath: 'http://localhost:8080',

    // ...

    chainWebpack: config => {
        // ...
        config.devServer
            .public('http://localhost:8080')
// ...

vue-apollo.js: 

const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:8000/graphql/'

РЕДАКТИРОВАТЬ: Если я обернуть graphql/ api urlpath с csrf_exempt, он работает: 

urlpatterns = [ # ...
    path('graphql/', csrf_exempt(GraphQLView.as_view(graphiql=True, schema=schema))),
]

Но это BadIdea (TM) с точки зрения безопасности. Как я могу получить этот токен сюда?Можно ли использовать Vue с Django и webpack_loader?

...