写出一个在windows上vscode中实现post提交控制led灯开关的前端代码,但是现在要从windos的前端代码中发送请求让在树莓派的后端代码接收到这个前端发出的post请求,该怎么实现这个跨域访问?请分别给出html,javascript,和树莓派中的python代码,并且再告诉我在前端代码中还需要在哪些文件中写跨域访问的配置
时间: 2024-03-03 14:50:44 浏览: 34
好的,我会按照你的要求提供完整的代码示例,并且指导你如何进行跨域访问的配置。
在Windows上的VSCode中实现POST提交控制LED灯开关的前端代码(HTML、JavaScript):
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Control LED</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Control LED</h1>
<button id="btnOn">LED ON</button>
<button id="btnOff">LED OFF</button>
<script>
$(document).ready(function(){
$("#btnOn").click(function(){
$.ajax({
url: "http://<raspberry-pi-ip>:5000/led",
type: "POST",
data: JSON.stringify({state: "on"}),
contentType: "application/json",
success: function(data) {
console.log(data);
}
});
});
$("#btnOff").click(function(){
$.ajax({
url: "http://<raspberry-pi-ip>:5000/led",
type: "POST",
data: JSON.stringify({state: "off"}),
contentType: "application/json",
success: function(data) {
console.log(data);
}
});
});
});
</script>
</body>
</html>
```
在上述代码中,我们使用jQuery库来发送POST请求。当用户点击“LED ON”按钮时,发送一个POST请求到http://<raspberry-pi-ip>:5000/led,请求体为{state: "on"};当用户点击“LED OFF”按钮时,发送一个POST请求到http://<raspberry-pi-ip>:5000/led,请求体为{state: "off"}。
在前端代码中,我们还需要在请求头中添加一个`Origin`字段,告诉服务器请求的来源。这是为了防止跨站请求伪造(CSRF)攻击。同时,我们需要在服务器端设置允许跨域访问的响应头。
在树莓派中的Python代码(使用Flask框架):
```python
from flask import Flask, request, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/led', methods=['POST'])
def control_led():
data = request.get_json()
state = data['state']
print('LED state:', state)
return jsonify({'status': 'ok'})
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)
```
在上述代码中,我们使用Python Flask框架来搭建后端服务。当收到POST请求时,从请求体中获取LED状态,并将其打印到控制台。同时,我们使用flask_cors库来设置允许跨域访问的响应头。
在前端代码中,我们还需要在哪些文件中写跨域访问的配置?我们需要在服务器端的代码中进行跨域访问的配置,而不是在前端代码中。在上述Python代码中,我们使用了flask_cors库来设置允许跨域访问的响应头。如果你希望更细粒度地控制跨域访问的配置,可以使用Flask自带的CORS插件或者其他第三方库来进行配置。
最后,你需要将前端代码中的`<raspberry-pi-ip>`替换为树莓派的IP地址,保存所有代码文件,并在树莓派上运行Python代码。在此之前,需要先在树莓派上安装Flask和flask_cors库:
```
pip install flask flask_cors
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)