我尝试用本地Flask REST API从vue.js前端注册一个用户。

我的Flask API在端口5000上运行，我的Vue应用程序在端口3000上运行。 我使用flask_cors并构建了以下endpoint:

from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "*"}})

@app.route("/register", methods=["POST"])
def create_user():
    error = False
    try:
        email = request.get_json()["email"]
        password = request.get_json()["password"]
        password = bcrypt.generate_password_hash(password).decode("utf8")
        newuser = User(email=email, password=password)
        newuser.insert()
    except:
        error = True
        db.session.rollback()
        return jsonify({"error"}), 404
    finally:
        db.session.close()
    if error is False:
        return jsonify({"success"}), 200

我在前端使用以下模板和脚本:

<template>
  <div id="register">
    <h2>Register</h2>
    <input
      type="text"
      name="username"
      v-model="input.username"
      placeholder="Username"
    />
    <input
      type="text"
      name="password"
      v-model="input.password"
      placeholder="Password"
    />
    <button type="button" v-on:click.prevent="register()">Register</button>
    <div id="success" v-if="submitted">Success</div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      input: {
        username: "",
        password: ""
      },
      submitted: false
    };
  },
  methods: {
    register() {
      if (this.input.username != "" && this.input.password != "") {
        this.$http
          .post("localhost:5000/register", {
            email: this.input.username,
            password: this.input.password
          })
          .then(function(data) {
            console.log("registered user");
            this.submitted = true;
          })
          .catch(function(e) {
            console.log(e);
          });
      }
    }
  }
};
</script>

在我的webpack.config.jsCORS部分中

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    port: 3000,
    proxy: {
      target: "http://localhost:5000/register"
    }
  }

CORS策略阻止了从源“http://localhost:3000”访问“localhost:5000/register”上的XMLHttpRequest:只有协议方案才支持跨源请求:http，data，chrome，chrome-extension，HTTPS。

我仍然得到错误，我相当不清楚，如果这是一个前端或后端的问题。 有人能帮我解决这个问题吗？ :/