产品描述:
我正在使用Vue.js构建一个Web应用程序,前端使用Flask。我从一个简单的登录页面开始。然而,当我从Vue.js应用程序向Flask后端发出请求时,我遇到了CORS(跨域资源共享)问题。
问题:
当我尝试从http://localhost:8081的Vue.js应用程序向http://localhost:5000的Flask服务器发出POST请求时,我收到以下错误:
CORS策略已阻止从源“http://localhost:8081”访问位于“http://localhost:5000/login”的XMLHttpRequest:对印前检查请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。
代码:
LoginForm.vue
<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"}})
# Sample user data (for demo purposes)
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
# Returns 403 if the password is wrong
return make_response(
'Could not verify',
403,
{'WWW-Authenticate': 'Basic realm="Wrong Password !!"'}
)
if __name__ == '__main__':
app.run(debug=True)
要求:
我将感谢任何关于如何解决此CORS问题并在我的Vue.js和Flask应用程序之间实现通信的指导。我是否应该采取任何其他步骤来确保正确的CORS配置?
我尝试过的:
- 我已经安装了Flask-CORS并在我的Flask应用程序中配置了它。- 我在我的Flask路由中添加了必要的CORS头文件,包括EST-Control-Allow-Origin头文件。- 我已经确保我的Vue.js应用程序和Flask服务器在指定的端口上运行。
尽管做出了这些努力,CORS问题仍然存在,我无法从Vue.js应用程序向Flask后端发出请求。
Request Headers from Postman
Response Header from Postman
3条答案
按热度按时间wwtsj6pe1#
我在flask应用程序中处理CORS,使用:
在路线中:
xv8emn3q2#
我认为最好的解决办法是建立一个代理制度。转到vue项目根目录下的
vue.config.js
文件,如果它不存在,请创建一个。在其中,键入以下代码:v8wbuo2f3#
当我像下面这样纠正代码时,它工作正常
这是我的请求
这是我的结果
下面是完整的代码