JavaScript Ошибка CORS при загрузке файлов с Axios - PullRequest
Новая
       38

JavaScript Ошибка CORS при загрузке файлов с Axios

0 голосов
/ 24 апреля 2020

Я занимаюсь разработкой веб-приложения с Flask на бэкэнде и React и Redux на веб-интерфейсе. Я хочу добавить опцию «Изменить изображение профиля» на страницу профиля, но всякий раз, когда я отправляю запрос с топором ios на мой маршрут /api/user/upload_image/, я получаю следующие ошибки: 

Access to XMLHttpRequest at 'http://localhost:5000/api/user/update_image' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
PATCH http://localhost:5000/api/user/update_image net::ERR_FAILED

Какие странно, потому что я установил свою оболочку CORS в своем приложении Flask следующим образом: 

self.cors = CORS(self.app, resources={r"/api/*": {"origins": "*"}})

, который должен разрешать запросы в / api / из всех источников.

Я также пытался сделать то же самое с Почтальоном, и это сработало как чудо - загрузил файл и сохранил его в /server/public/profile_pictures/

Когда я пытаюсь загрузить обычный текст JSON из моего приложения реагирования, оно также работает. Он выдает ошибку только при загрузке файлов.

Вот JSX для ввода + обработчик событий 

<label>
    Change Profile Picture
    <input onChange={(e) => {
        this.setState({image: e.target.files[0]})}
    } type="file" name="image" />
</label>

Затем у меня есть кнопка отправки, которая отправляет следующее действие с this.state.image как параметр: 

export const updateImage = (file) => {
return async (dispatch, getState) => {
    const formData = {
        user_id: getState().currentUser.user.user_id,
        auth_key: getState().currentUser.auth_key,
        image: file
    }
    Axios.patch("http://localhost:5000/api/user/update_image", formData, {
        headers: {
            'Content-Type' : 'multipart/form-data'
        }
    })
    .then(response => {
        dispatch({type: UPDATE_IMAGE, payload: response.data})
    })
}

Я пытался использовать встроенный метод formData для создания объекта JS, но это тоже не помогло.

Наконец, вот python метод, который вызывается при достижении маршрута /api/user/update_image: 

def update_image(self, request):   
    image = request.files['image']
    data = request.params

    image.save("./public/profile_pictures/user_p_picture_id_"+data['user_id']+".jpg")
    fsql.update("""UPDATE users SET profile_picture = %s WHERE user_id = %s""", ("/public/profile_pictures/user_p_picture_id_"+data['user_id']+".jpg", data['user_id']))

    return jsonify({
        "error_code" : "200", 
        "error_message" : "Success"
    })

1 Ответ

0 голосов
/ 08 мая 2020

Я на самом деле решил это примерно за полторы недели go, но сегодня проверил состояние.

Так что решение было сделать несколько изменений в моем параметре конфигурации и параметрах CORS. Вот конфиги, которые я сейчас использую: 

config = {
    'ORIGINS': [
        'http://localhost:3000',  # React
        'http://127.0.0.1:3000',  # React
    ],
    'SECRET_KEY': '...' #secret key

    self.cors = CORS(self.app, resources={
        r'/api/*': {
            "Access-Control-Allow-Origin": config["ORIGINS"],
            "Access-Control-Allow-Credentials": True,
            'supports_credentials': True
        },
    },
    supports_credentials = True,
    expose_headers = "*"
)

self.app.config['UPLOAD_FOLDER'] = r'/*' # Change this to only the folder you want to save images to
self.app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024 # Change this according to your file size

Это решило мои проблемы с CORS и передачей файлов.

Я действительно надеюсь, что это кому-нибудь поможет. Документы CORS на flask -коры не охватывают все, что касается загрузки файлов и хранения сеансов, поэтому нам приходится как-то исправлять ошибки, не зная, как все работает, - например, пытаться решить головоломку с отсутствующими частями.

HMU в сообщениях, если у вас есть какие-либо хорошие инструменты для CORS в flask, которые хорошо документированы и вокруг них есть сообщество.

...