javascript - 如何使用 vue js 向 Flask 后端 api 发送请求？

Question

我正在尝试使用 vue js 和 Flask 后端进行简单的注册过程。但我收到此错误消息。

XMLHttpRequest 无法加载 http://localhost:5000/users 。对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin” header 。来源'http://localhost:8080 ' 因此不允许访问。

为什么会发生这种情况？

我的vue js代码如下

methods: {

    signup() {

        this.$http.post("http://localhost:5000/users", this.user)
            .then(function(data) {
                alert(data)
            })
    }

}

我的 flask 后端代码如下

@app.route('/users', methods=['POST'])
    def users():
    username = request.form.get('username')
    password1 = request.form.get('password1')
    password2 = request.form.get('password2')
    first_name = request.form.get('first_name')
    last_name = request.form.get('last_name')
    email = request.form.get('email')

    file = request.files['avatar']

    if file.filename:
        if allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], 
    filename))
        else:
            error = "Your avatar has be to an image file"
            redirect(url_for('signup'))
    else:
        filename = ""


    if password1 == password2:
        user = User(username = username, password = password1, first_name = first_name, last_name = last_name,  email = email)
        user.save_to_db()

Answer 1

如果您在本地托管它们，您可以尝试运行网络浏览器，例如没有 Web 安全性的 Chrom 在 Windows 的 CLI 中使用以下代码。希望对您有所帮助!

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security