python使用web.py开发httpserver,解决post请求跨域问题

本文介绍了在使用web.py构建HTTP Server时遇到的跨域请求问题,详细阐述了浏览器的同源策略以及W3C规范中的跨域访问限制。通过设置Access-Control-Allow-*响应头,成功解决POST请求的跨域问题。提供了完整的HTTP Server代码示例,确保浏览器能够正常获取数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用web.py做http server开发时,遇到postman能够正常请求到数据,但是浏览器无法请求到数据,查原因之后发现是跨域请求的问题。

跨域请求,就是在浏览器窗口中,和某个服务端通过某个 “协议+域名+端口号” 建立了会话的前提下,去使用与这三个属性任意一个不同的源提交了请求,那么浏览器就认为你是跨域了,违反了浏览器的同源策略。 w3c标准中,有针对跨域请求的规范,在响应头中有以下三种跨域访问限制:

        Access-Control-Allow-Origin:限制允许跨域访问的源,比如http://192.168.10.12:8080,注意这里仅仅支持*(表示所有源)号或者某个源,不支持多个源,如果要实现多个源,可以自己包装一个集合,对每次的请求在集合中判断是否存在,如存在,就放到响应头中来;

### 解决前端 Axios 请求的 CORS 问题 为了使 Python 后端能够处理来自前端的请求,可以通过配置后端来支持 CORS(资源共享)。以下是具体实现方式: #### 配置 Django 支持 CORS 在 Django 中可以借助 `django-cors-headers` 库轻松实现 CORS 的支持。安装该库并完成以下配置即可。 1. **安装依赖** 安装 `django-cors-headers`: ```bash pip install django-cors-headers ``` 2. **更新 settings.py 文件** 将 `'corsheaders.middleware.CorsMiddleware'` 添加到 `MIDDLEWARE` 列表中,并将其放置在其他中间件之前[^3]。 ```python MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', ... ] ``` 3. **定义允许名** 设置 `CORS_ALLOWED_ORIGINS` 来指定哪些前端地址被允许访问后端资源。例如: ```python CORS_ALLOWED_ORIGINS = [ "http://127.0.0.1:8080", # Vue 开发环境地址 "http://localhost:8080", ] ``` 如果希望允许所有来源,则可设置: ```python CORS_ALLOW_ALL_ORIGINS = True ``` 4. **允许特定 HTTP 方法和头部字段** 可以进一步细化 CORS 行为,比如允许HTTP 方法以及自定义请求头: ```python CORS_ALLOW_METHODS = [ "DELETE", "GET", "OPTIONS", "PATCH", "POST", "PUT", ] CORS_ALLOW_HEADERS = [ "accept", "authorization", "content-type", "user-agent", "x-csrftoken", "x-requested-with", ] ``` 5. **支持带凭证的请求** 若需要支持带有 Cookie 或 Token 认证的请求,需启用以下选项: ```python CORS_ALLOW_CREDENTIALS = True ``` 6. **视图中的响应头设置** 对于某些场景,可以直接在视图函数中手动设置响应头。例如: ```python from django.http import JsonResponse def data(request): info = {"name": "景浩", "age": 18} response = JsonResponse(info, json_dumps_params={"ensure_ascii": False}) response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8080" return response ``` 这种方法适用于简单的单个视图控制,但对于复杂的项目推荐使用 `django-cors-headers` 统一管理[^2]。 --- #### Flask 实现 CORS 支持 对于基于 Flask 的应用,也可以通过扩展包 `flask-cors` 来快速实现 CORS 功能。 1. **安装 flask-cors** ```bash pip install flask-cors ``` 2. **初始化 CORS 扩展** 在 Flask 应用中引入并初始化 `CORS`: ```python from flask import Flask from flask_cors import CORS app = Flask(__name__) CORS(app) # 全局开启 CORS 支持 ``` 3. **细粒度控制** 若要针对某个路由单独启用 CORS,可以在装饰器中指定: ```python @app.route("/data") @cross_origin(origins="http://127.0.0.1:8080") # 指定允许的源 def get_data(): return {"name": "景浩", "age": 18} ``` --- #### Vue CLI 和 Proxy 方案 除了后端配置外,还可以利用前端开发工具(如 Vue CLI)内置的代理功能规避问题。例如,在 `vue.config.js` 中配置代理规则[^4]: ```javascript module.exports = { devServer: { host: '127.0.0.1', port: 8080, open: true, proxy: { "/api": { target: "http://127.0.0.1:8000", // 后端接口地址 changeOrigin: true, pathRewrite: { "^/api": "" }, }, }, }, }; ``` 这样,所有的 `/api` 请求都会转发至目标后端地址。 --- ### 总结 无论是通过 Django 的 `django-cors-headers` 插件还是 Flask 的 `flask-cors` 工具,都可以有效解决前端 Axios 请求带来的问题。同时,Vue CLI 提供的代理机制也是一种临时解决方案,适合开发阶段使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值