Vue.js与Flask跨域问题：XMLHttpRequest请求被拦截

我正在用Vue.js做前端、Flask做后端开发Web应用，目前在开发登录页面。当Vue.js应用（运行在http://localhost:8081）向Flask后端（运行在http://localhost:5000）发起POST请求时，遇到了CORS错误：

Access to XMLHttpRequest at 'http://localhost:5000/login' from origin 'http://localhost:8081' 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.

代码示例 #

LoginForm.vue #

<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="login">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username" />
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password" />
      </div>
      <button type="submit">Login</button>
    </form>
    <div>{{ message }}</div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      username: '',
      password: '',
      message: '',
    };
  },
  
  methods: {
    async login() {
      try {
        const response = await axios.post('http://localhost:5000/login', {
          username: this.username,
          password: this.password,
        });

        if (response.status === 200) {
          this.message = 'Login successful!';
        } else {
          this.message = 'Invalid credentials';
        }
      } catch (error) {
        console.error('An error occurred:', error);
      }
    }
  },
};
</script>

app.py #

from flask import Flask, request, make_response, jsonify
from flask_cors import CORS, cross_origin
from itsdangerous import TimedJSONWebSignatureSerializer as Serializer
import os

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

# 示例用户数据（仅用于演示）
users = [
    {"username": "user1", "password": "password1"},
    {"username": "user2", "password": "password2"},
]

SECRET_KEY = os.urandom(24)

def generate_user_token():
    serializer = Serializer(SECRET_KEY, expires_in=3600)

    token_data = {'is_admin': True}

    token = serializer.dumps(token_data).decode('utf-8')

    return token

@app.route('/login', methods=['POST'])
@cross_origin(origin="http://localhost:8081", supports_credentials=True)
def login():
    data = request.get_json()
    username = data.get('username')
    password = data.get('password')

    for user in users:
        if user['username'] == username and user['password'] == password:
            if username == 'user1':
                token = generate_user_token()  
                return make_response(jsonify({'token': token}), 201)
            return jsonify({"message": "Login successful!"}), 200

    # 密码错误时返回403
    return make_response(
        'Could not verify',
        403,
        {'WWW-Authenticate': 'Basic realm="Wrong Password !!"'}
    )

if __name__ == '__main__':
    app.run(debug=True)

已尝试的解决方法 #

• 安装并配置Flask-CORS
• 在Flask路由中添加Access-Control-Allow-Origin等CORS响应头
• 确认Vue.js和Flask分别运行在8081和5000端口

尽管做了以上尝试，CORS问题仍然存在，无法实现前后端正常通信。希望能得到解决指导以及额外的CORS配置建议。

内容的提问来源于stack exchange，提问作者Hannah Joshua