一、与后端交互之ajax
版本1 - 出现了跨域问题
前端：index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<title>title</title>
</head>
<body>
<div id="box">
<button @click="handleClick">美女</button>
美女你好:{{mytext}}
</div>
</body>
<script>
var myajax = $
var vm = new Vue({
el: '#box',
data: {
mytext: "",
},
methods: {
handleClick() {
myajax.ajax({
url: 'http://127.0.0.1:5000',
method: 'get',
success: (data) => {
console.log(data)
}
})
}
}
})
</script>
</html>
后端：main.py
from flask import Flask # 这里用轻量级的Flask框架来测试
app = Flask(__name__)
@app.route('/')
def index():
print('请求来了')
return 'Hello World'
if __name__ == '__main__':
app.run()
这里可以看出：前端向后端成功发送了请求，后端也成功响应了，但是前端却报错了
这是因为：跨域问题的存在，浏览器检测到前端和后端不是来自同一个域，所以认为这是不安全的，所以就拦截了该资源的传递
想要解决这个问题，就要实现：CORS，也就是 跨域资源共享
版本2 - 用两行代码解决了跨域问题
前端：index.html ----->同版本1
后端：main.py
from flask import Flask, make_response
app = Flask(__name__)
@app.route('/')
def index():
print('请求来了')
#下面这两行解决了跨域问题
res = make_response('Hello World')
res.headers['Access-Control-Allow-Origin'] = '*' # 访问控制允许的源 设置为全部
return res
if __name__ == '__main__':
app.run()
版本3 - 后端读取json文件传到前端
json文件：file.json
{
"name": "lili",
"age": "18",
"gender": "male"
}
前端：index.html --->同版本1
后端：main.py
import json
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/')
def index():
print('请求来了')
with open('file.json', mode='rt', encoding='utf-8') as f:
dic = json.load(f)
res = jsonify(dic)
res.headers['Access-Control-Allow-Origin'] = '*'
return res
if __name__ == '__main__':
app.run()
二、与后端交互之fetch
三、与后端交互之axios