Ошибка CSP при публикации в приложении Flask - Vue - PullRequest
Новая
       36

Ошибка CSP при публикации в приложении Flask - Vue

0 голосов
/ 06 марта 2020

Я пытаюсь сделать простой почтовый запрос от vue клиента, используя ax ios к моему flask бэкэнду. После получения некоторых ошибок CORS, я установил flask -cors, искал правильную конфигурацию для CORS (), установил заголовки для метода ax ios post, но я получаю ответ Cannot POST / login при попытке запроса , Консоль показывает:

Ошибка: запрос отменен Политика безопасности содержимого: в настройках страницы заблокирована загрузка ресурса при подключении («default-src»). Политика безопасности содержимого: в настройках страницы заблокирована загрузка ресурса в eval («default-src»). Политика безопасности содержимого. Настройки страницы заблокировали загрузку ресурса по адресу http://localhost: 8080 / favicon.ico («default-src»). Политика безопасности содержимого: в настройках страницы заблокирована загрузка ресурса в eval («default-src»).

Соответствующий код должен быть 

#__init__.py
from flaskps.config import Config
from flask_cors import CORS
import logging

app = Flask(__name__)
app.config.from_object(Config) # my configs

logging.basicConfig(filename='example.log',level=logging.DEBUG)
logging.getLogger('flask_cors').level = logging.DEBUG

CORS(app,resources={r'/.*':{'origins':'http://localhost:8080/'}},supports_credentials=True) 
app.add_url_rule( "/autenticacion",    'auth_authenticate',    auth.authenticate,    methods=['POST'])

Я предпочитаю не использовать декоратор маршрута. Это было большое приложение, созданное с помощью шаблонов Jinja2, и я сейчас пытаюсь передать его в Vue. Я изменил метод аутентификации, чтобы просто вернуть json

#auth.py
def authenticate():
    print(request.form)
    return jsonify("Exito usuario registrado")

Использовал небольшой маршрутизатор, который работает нормально, это одно из представлений 

//login.vue which used a Login component that i took out to clear any troubling code
<template>
    <div class="login_view">
    <form class="form-signin" @submit="onSubmit" method="POST">
            <label class="sr-only">Correo</label>
            <input v-model="email" type="email" id="email" name="email" class="form-control" placeholder="Correo" required autofocus>
            <label class="sr-only">Clave</label>
            <input v-model="password" type="password" id="password" name="password" class="form-control" placeholder="Clave" required>
            <br>
            <button class="btn btn-lg btn-light btn-block" type="submit">Iniciar Sesión</button>
        </form>
    </div>
</template>
<script>

import axios from 'axios'
export default {
    name: 'login_view',
    data :function() {
        return{
            email:'',
            password:''
        }
    },
    methods :{
        initForm() {
            this.email = ''
            this.password = ''
        },
        doLogin(payload){
            const headers = {            
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*'
            }
            axios.post("http://localhost:5000/autenticacion", payload, {
                headers: headers
            })
                .then(response => console.log(response))
        },
        onSubmit(){
            console.log("Submited")
            const payload = {
                email: this.email,
                password: this.password
            }
            this.doLogin(payload)
        }     
    },
}
</script>

Я пытался с разными заголовками в сообщении ax ios и более простыми параметрами для метода CORS, но ни один вариант не сработал example.log показывает следующее:

DEBUG: flask_cors.extension: Настройка CORS с ресурсами: {'/ ': {'originins': ['http://localhost: 8080 / '], 'методов' : 'УДАЛИТЬ, ПОЛУЧИТЬ, ЗАГОЛОВИТЬ, ОПЦИИ, ПАТЧ, POST, PUT', 'allow_headers': ['. '], 'expose_headers': Нет, 'support_credentials': True, 'max_age': Нет, 'send_wildcard ': False,' automatic_options ': True,' var_header ': True,' resources ': {' / * ': {' originins ':' http://localhost: 8080 / '}},' intercept_exceptions ': True,' always_send ': True}} ПРЕДУПРЕЖДЕНИЕ: werkzeug: * Отладчик активен! ИНФОРМАЦИЯ: werkzeug: * ПИН отладчика: 160-985-678

Если вам нужен какой-либо другой пример кода, просто скажите спасибо!

...