从 Vue 上传文件到 Flask CORS 不起作用答案

【问题标题】：Uploading File from Vue to Flask CORS Doesn't Work从 Vue 上传文件到 Flask CORS 不起作用
【发布时间】：2017-07-13 00:15:59
【问题描述】：

我正在尝试将文件从 vue 上传到烧瓶，但我得到了

跨域请求被阻止：同源策略不允许在http://localhost:5000/upload 读取远程资源。（原因：缺少 CORS 标头“Access-Control-Allow-Origin”）..

这是我的 vue 代码：

<script>
  var Vue = require('vue');
  Vue.use(require('vue-resource'));
  export default {
    name: 'app',
    methods: {
      onFileChange(e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length)
          return;
        let data = new FormData();
        data.append('file', files[0]);
        Vue.http.post('http://localhost:5000/upload', this.fileUploadFormData, function (data) {
          alert('good')
        });
      }
    }
  }
</script>

这是我的 app.py

import os

from flask import Flask, render_template, app, send_file, request, jsonify, flash, redirect, url_for
from livereload import Server
from werkzeug.utils import secure_filename
from pandas import read_csv
from flask_cors import CORS, cross_origin


app = Flask(__name__)
cors = CORS(app, resorces={r'/*': {"origins": '*'}})
app.config['CORS_HEADER'] = 'Content-Type'


UPLOAD_FOLDER = 'static/uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER


@app.route('/', methods=['GET', 'POST'])
@cross_origin(origin='*', headers=['Content-Type', 'Authorization'])
def upload_file():
    return send_file('static/html/index.html')


@app.route('/upload', methods=['POST'])
@cross_origin(origin='*', headers=['Content-Type', 'Authorization'])
def uploadFile():
    if request.method == 'POST':
        # check if the post request has the file part
        if 'file' not in request.files:
            flash('No file part')
            return redirect(request.url)
        file = request.files['file']
        # if user does not select file, browser also
        # submit a empty part without filename
        if file.filename == '':
            flash('No selected file')
            return redirect(request.url)
        if file:
            filename = secure_filename(file.filename)
            full_filename = os.path.join(app.config['UPLOAD_FOLDER'], filename)
            file.save(full_filename)
            df = read_csv(full_filename, error_bad_lines=False, warn_bad_lines=False)
            return str(df.to_json())
    #return redirect(url_for('upload_file', file=filename))


if __name__ == "__main__":
    app.debug = True
    server = Server(app.wsgi_app)
    #server.serve()
    app.run()

【问题讨论】：

标签： flask cors flask-cors

【解决方案1】：

在这一行：cors = CORS(app, resorces={r'/*': {"origins": '*'}}) 你有一个错字。将resorces 更改为resources。

【讨论】：