【 vue与ajax 】
跨域的使用方法
# 1 后端---》提供接口--》json形式--》给前端--》前端拿到再做处理
-后端接口
-ajax 发送请求
# 2 vue中使用ajax
-1 jquery的ajax
-2 js原生的fetch
-XMLHTTPRequest--》需要做浏览器兼容
-fetch方案
-3 第三方axios（最多）
# 3 写个后端接口--》django----》flask简单
# 4 前后端交互---》跨越问题---》后端处理
-Access-Control-Allow-Origin
- 先安装
pip install flask
这里建议用Pycharm下载（方便省事）
from flask import Flask, jsonify
import json
app = Flask(__name__)
@app.route('/')
def index():
res = jsonify({
'code': 100,
'msg': '成功',
'userinfo': {'name': 'jing', 'age': 26, "hobby": "music"}
})
return res
@app.route('/films')
def films():
with open('./fiml.json', 'r', encoding='utf-8') as f:
res_dict = json.load(f)
res = jsonify(res_dict)
return res
if __name__ == '__main__':
app.run()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX跟vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id='one'>
<h1>点击按钮 ，获取数据，显示</h1>
<p>姓名:{{name}}</p>
<p>年龄:{{age}}</p>
<p>爱好:{{hobby}}</p>
<br>
<button @click="handload">获取信息</button>
</div>
<script>
new Vue({
el: "#one",
data: {
name: '',
age: '',
hobby: '',
},
methods: {
handload() {
$.ajax({
url: "http://127.0.0.1:5000/",
method: 'get',
success: function (data) {
console.log(data)
}
})
}
}
})
</script>
</body>
</html>
'''
这个错误提示表明在你的前端页面（[http://localhost:63342](http://localhost:63342/)）中，尝试从源（origin）为 'http://127.0.0.1:5000/' 的地址发起 XMLHttpRequest 请求时，被浏览器的 CORS（跨源资源共享）策略所阻止了。这是因为在标准的跨域请求中，浏览器会执行同源策略，阻止页面中的 JavaScript 代码从不同源（域、协议或端口）的服务器获取数据或资源。
解决这个问题的常用方法之一是在服务器端设置 CORS 头信息，允许特定的源进行跨域访问。对于 Flask 服务器，你可以使用 Flask-CORS 扩展来简化这个过程。'''
解决方案一:
# pip install flask-cors
就是在Pycharm中添加from flask_cors import CORS
CORS(app) # 允许所有源进行跨域访问，可以根据需求进行配置
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # 允许所有源进行跨域访问，可以根据需求进行配置
# 接下来的路由和视图函数定义
@app.route('/')
def index():
return 'Hello, World!'
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5000)
# python
from flask import Flask, jsonify
import json
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/')
def index():
res = jsonify({
'code': 100,
'msg': '成功',
'userinfo': {'name': 'jing', 'age': 26, "hobby": ["music","swimming","running"]}
})
return res
if __name__ == '__main__':
app.run()
#html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX跟vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id='one'>
<h1>点击按钮 ，获取数据，显示</h1>
<p>姓名:{{name}}</p>
<p>年龄:{{age}}</p>
<p>爱好:{{hobby}}</p>
<br>
<button @click="handload">获取信息</button>
</div>
<script>
new Vue({
el: "#one",
data: {
name: '',
age: '',
hobby: '',
},
methods: {
handload() {
// 保存 Vue 实例的 this 到变量 vm 中
var vm = this;
$.ajax({
url: "http://127.0.0.1:5000/",
method: 'GET',
success: function (data) {
console.log(data)
// 使用 vm 来访问 Vue 实例的数据
vm.name = data.username.name
vm.age = data.username.age
vm.hobby = data.username.hobby[0]
}
})
}
}
})
</script>
</body>
</html>
让我们再去页面当中会发现会出现一个Access-Control-Allow-Origin:[http://localhost:63342](http://localhost:63342/) 这个就是说明请求成功！
解决方案二:
res.headers['Access-Control-Allow-Origin'] = '*'Flask 应用程序，用于提供两个路由，一个返回用户信息, 在每个路由中，您都设置了 CORS 头，允许所有来源的请求。这样的话，前端应用程序就可以从您的服务器获取数据，而无需担心跨域问题。
from flask import Flask, jsonify
import json
app = Flask(__name__)
@app.route('/')
def index():
res = jsonify({
'code': 100,
'msg': '成功',
'userinfo': {'name': 'jing', 'age': 26, "hobby": "music"}
})
res.headers['Access-Control-Allow-Origin'] = '*'
return res
if __name__ == '__main__':
app.run()