Access to resource at 'http://localhost:8080/coze2' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

### 跨域问题分析 跨域资源共享（CORS, Cross-Origin Resource Sharing）是一种安全机制，用于防止浏览器中的恶意脚本攻击。当客户端尝试从一个源（origin）访问另一个源上的资源时，如果目标服务器未设置相应的响应头，则会触发 CORS 错误。 当前问题是由于前端运行在 `http://127.0.0.1:5500` 上，而后端服务位于 `http://localhost:8080`，两者被认为是不同的源，因此浏览器拦截了请求并抛出了错误“No 'Access-Control-Allow-Origin' header”。 --- ### 后端解决方案 #### Django 配置调整 在 Django 中可以通过安装第三方库 `django-cors-headers` 来处理 CORS 请求[^2]： 1. **安装依赖** 安装 `django-cors-headers` 库： ```bash pip install django-cors-headers ``` 2. **更新 settings.py 文件** 将其添加到项目的已启用应用列表中，并配置白名单和其他参数： ```python INSTALLED_APPS = [ ... "corsheaders", ... ] MIDDLEWARE = [ ... "corsheaders.middleware.CorsMiddleware", # 添加此中间件 "django.middleware.common.CommonMiddleware", ... ] CORS_ORIGIN_WHITELIST = ( "http://127.0.0.1:5500", # 增加前端地址 "http://localhost:5500", # 如果适用的话 ) CORS_ALLOW_CREDENTIALS = True # 是否允许携带 Cookie 和认证信息 ``` 3. **验证配置** 确保上述更改生效后重启 Django 开发服务器。此时，Django 的响应应该包含如下头部字段： ``` Access-Control-Allow-Origin: http://127.0.0.1:5500 Access-Control-Allow-Credentials: true ``` --- ### 前端解决方案 即使后端正确设置了 CORS 头部，有时仍需配合前端修改来解决问题[^3]。 #### Vue.js 或 Vite 配置代理 对于开发环境下的跨域问题，可以利用 Webpack/Vite 提供的代理功能重定向请求至目标服务器。 ##### 使用 Vite 配置代理 编辑项目根目录下的 `vite.config.js` 文件，增加以下内容： ```javascript import { defineConfig } from 'vite'; export default defineConfig({ server: { proxy: { '/coze2': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/coze2/, '') } } } }); ``` 这样做的好处是无需手动修改 API 地址即可完成本地测试。 ##### 修改 Axios 默认基础路径 如果你正在使用 Axios 进行 HTTP 请求操作，也可以直接指定基础 URL 并开启凭证支持： ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:8080/', withCredentials: true // 发送带 cookie 的请求 }); // 导出实例以便全局调用 export default instance; ``` --- ### 测试与调试建议 为了确认问题是否完全解决，可按照以下方法逐一排查： 1. 打开开发者工具网络面板观察实际返回的数据包及其头部； 2. 检查是否存在额外的安全限制（如 HTTPS 强制加密传输）； 3. 清除缓存或切换无痕模式重新加载页面以排除潜在干扰因素的影响。 --- ### 总结 综合来看，该场景下最推荐的方式是从后端入手完善 CORS 设置的同时辅以前端代理手段规避不必要的复杂度。具体实现方式取决于团队技术栈以及业务需求的不同而有所差异。 ---