安徽网站优化价格咨询网站建设发布平台
目录
- 跨域问题
- 问题发现
- 浏览器的同源策略
- 解决办法
跨域问题
问题发现
在开发前后端分离的项目时（flask+vue），遇到过页面不显示的问题，查看控制台，有这样的提示
[localhost/:1](https://localhost/:1) Access to XMLHttpRequest at '[http://127.0.0.1:8000/category/list](http://127.0.0.1:8000/category/list)' from origin '[http://localhost:5173](http://localhost:5173/)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我的后端用的IP端口是127.0.0.1:8000，前端是localhost:5173。
控制台出现这个提示是由于跨域资源共享（CORS）策略导致的，也就是跨域。
浏览器的同源策略
浏览器的同源策略是浏览器的一种安全机制，用于限制一个源的文档或脚本如何与另一个源的资源进行交互。
“同源” 的定义是：协议相同（如 http 或 https）、域名相同（如 example.com）、端口号相同（如 80 或 443）
如果以上任意一项不同，浏览器就会认为这是跨域请求，并触发跨域限制。
对于我的这个情况，应该是因为端口号不一样导致的。
localhost和127.0.0.1
- 127.0.0.1 回环地址，当设备向这个地址发送数据包时，数据包不会离开本地设备，而是直接被操作系统的网络协议栈接收并处理，就好像数据在设备内部 “转了一圈” 又回来了。在 IPv6 中，对应的回环地址是 ::1
- Localhost 域名，通常作为本地主机的别名。很多操作系统的hosts文件都默认将 localhost 域名映射到 127.0.0.1 这个 IP 地址
浏览器会检查服务器的响应头中是否包含允许跨域的字段（如 Access-Control-Allow-Origin），根据这些头部信息来判断是否允许跨源访问。如果响应头中没有允许跨域的字段，浏览器会阻止前端应用访问响应数据。
解决办法
- 在响应头中添加 CORS 相关的字段。在flask可以直接使用
flask_cors
from flask import Flaskfrom
flask_cors import CORS
tz_app = Flask(__name__)
CORS(tz_app)# 只允许特定源访问
# CORS(app, origins=['http://www.test.com'])
- 使用websocket ，一种双向通信协议，不受同源策略的限制