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

Spring被CORS策略拦截的原因是由于请求的资源没有提供'Access-Control-Allow-Origin'头字段。CORS（跨域资源共享）是一种机制，用于允许在一个域中的网页向另一个域中的资源发起跨域请求。当浏览器发起一个跨域请求时，会先发送一个预检请求，该请求需要服务器返回一个包含'Access-Control-Allow-Origin'头字段的响应。如果服务器没有提供该头字段，浏览器就会拦截该请求，并报错"Access to XMLHttpRequest at 'http://....' from origin 'http://....' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"。这是浏览器的一种安全策略，用于防止恶意网站访问其他域中的敏感信息。解决该问题的方法是在服务器端配置相应的CORS规则，添加'Access-Control-Allow-Origin'头字段，指定允许跨域访问的来源。

相关问题

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

在Spring Boot中，当你在前端页面中通过Ajax请求后端接口时，可能会遇到"has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"的错误。这是由于浏览器的同源策略所导致的。

同源策略是一种安全机制，它限制了不同源（协议、域名、端口）之间的交互。当你的前端页面和后端接口不满足同源策略时，浏览器会阻止跨域请求。

为了解决这个问题，你可以在后端接口中添加CORS配置。在Spring Boot中，你可以通过添加一个过滤器来实现。以下是一个简单的示例：

1. 创建一个名为CORSFilter的类，并实现javax.servlet.Filter接口。
2. 在doFilter方法中，设置响应头信息，允许指定的域名进行跨域请求。例如，设置"Access-Control-Allow-Origin"为"*"表示允许所有域名进行跨域请求。
3. 将该过滤器注册到Spring Boot应用程序中。

下面是一个示例代码：

import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CORSFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "*");
        httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        httpResponse.setHeader("Access-Control-Max-Age", "3600");
        httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept, X-Requested-With, remember-me");

        chain.doFilter(request, response);
    }
}

请注意，这只是一个简单的示例，你可以根据你的实际需求进行配置。

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 配置类示例
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**") // 只允许 /api 下面接口跨域访问
            .allowedOrigins("http://localhost:8080"); // 允许来自特定域名的请求
    }
}

#### 方法二：使用代理中间件

另一种解决方案是在开发环境中利用 Vite 或者其他构建工具提供的代理功能来绕过 CORS 限制。这样做的好处是可以完全避免修改实际部署的服务端代码，在本地测试期间非常方便[^4]。

// 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]：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(
    app, 
    resources={
        r"/api/*": {"origins": "http://example.com"}
    }
)