vue3 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

### Vue3 中解决 CORS 错误 'Access-Control-Allow-Origin' 当在 Vue3 项目中发起 HTTP 请求时，可能会遇到由于服务器端未设置 `Access-Control-Allow-Origin` 响应头而导致的跨源资源共享 (CORS) 问题。这通常表现为浏览器控制台中的错误消息：“No ‘Access-Control-Allow-Origin’ header is present on the requested resource”。 #### 方法一：配置后端服务 对于 Spring Boot 后端应用，可以通过全局或局部方式启用 CORS 支持。确保仅有一个地方设置了 `Access-Control-Allow-Origin` 头部信息，因为存在多个相同头部会引发冲突并阻止请求成功[^2]。 ```java // Java 配置类示例 @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") // 只允许 /api 下面接口跨域访问 .allowedOrigins("http://localhost:8080"); // 允许来自特定域名的请求 } } ``` #### 方法二：使用代理中间件 另一种解决方案是在开发环境中利用 Vite 或者其他构建工具提供的代理功能来绕过 CORS 限制。这样做的好处是可以完全避免修改实际部署的服务端代码，在本地测试期间非常方便[^4]。 ```json // vite.config.js 文件片段 export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:9090', // 目标API地址 changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') }, }, }, }) ``` #### 方法三：调整 Flask 应用程序的安全策略 如果是基于 Python 的 Flask 框架，则可以直接通过安装第三方库如 `flask-cors` 来简化 CORS 设置过程。下面是一个简单的例子展示了如何针对 `/api/` 路径下的 API 接口开放指定来源的跨站请求权限[^3]： ```python from flask import Flask from flask_cors import CORS app = Flask(__name__) CORS( app, resources={ r"/api/*": {"origins": "http://example.com"} } ) ```