如何使用vue js将请求发布到Flask后端api？

Question

I am trying to do simple signup process using vue js and flask back end. But I get this error message.

XMLHttpRequest cannot load http://localhost:5000/users . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:8080 ' is therefore not allowed access.

Why is this happening?

My vue js code is following

methods: {

    signup() {

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

}

my flask back end code is following

@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

If you are hosting both of them locally you could try running web browser eg Chrom with out web security Use the following code in CLI for windows. Hope it will help!

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

Answer 2

You are serving your app over http://localhost:8080/ while your API is at http://localhost:5000 and these two are different origins for the browser!

From MDN

A resource makes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port to its own. For example, an HTML page served from http://domain-a.com makes an src request for http://domain-b.com/image.jpg

For security reasons , browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest and Fetch follow the same-origin policy. So, a web application using XMLHttpRequest or Fetch could only make HTTP requests to its own domain.

The Cross-Origin Resource Sharing (CORS) mechanism gives web servers cross-domain access controls, which enable secure cross-domain data transfers. Modern browsers use CORS in an API container - such as XMLHttpRequest or Fetch - to mitigate risks of cross-origin HTTP requests.

In your case either use flask-cors or host your API on the same domain as your app.