【跨域问题解决】Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS

这个错误是由于浏览器的同源策略（CORS, Cross-Origin Resource Sharing）导致的。当从一个源（origin）向另一个源请求资源时，如果这两个源的协议、域名或端口号不同，就会触发CORS策略。

解决方法

要解决这个问题，你需要在你的后端服务中添加CORS支持，以便它允许来自你的请求。这通常涉及到在你的后端服务器中添加适当的响应头（Headers）。

以下是一些常见后端技术栈中如何设置CORS的示例：

Node.js（使用Express）

如果你正在使用Express框架，你可以安装并使用cors中间件来简化CORS的配置。

首先，安装cors包：

npm install cors

然后，在你的Express应用中引入并使用它：

const express = require('express');  
const cors = require('cors');  
const app = express();  
  
app.use(cors({  
  origin: 'http://localhost:5173' // 只允许来自这个源的请求  
}));  
  
// 其他中间件和路由...  
  
app.listen(3000, () => {  
  console.log('Server is running on port 3000');  
});

或者，如果你想允许来自任何源的请求（注意：出于安全考虑，不建议在生产环境中这样做）：

app.use(cors());

Spring Boot

如果你使用的是Spring Boot，你可以在你的控制器或全局配置中添加CORS支持。

全局配置（在Spring Security中）：

@Configuration  
@EnableWebSecurity  
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {  
  
    @Override  
    protected void configure(HttpSecurity http) throws Exception {  
        http  
            // 其他配置...  
            .cors().and()  
            .csrf().disable() // 禁用CSRF保护，根据你的需求来决定是否需要  
            // 其他安全配置...  
    }  
  
    @Bean  
    public CorsConfigurationSource corsConfigurationSource() {  
        CorsConfiguration configuration = new CorsConfiguration();  
        configuration.setAllowedOrigins(Arrays.asList("http://localhost:5173"));  
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS", "HEAD"));  
        // 其他CORS配置...  
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();  
        source.registerCorsConfiguration("/**", configuration);  
        return source;  
    }  
}

注意：根据你的Spring Boot版本和安全配置，CORS的配置可能会有所不同。

其他方法

需要在响应中添加Access-Control-Allow-Origin头部。具体实现方式会依赖于你使用的框架或库。

例如在nodejs中添加：

 res.setHeader('Access-Control-Allow-Origin','*')

确保在开发过程中正确处理CORS，以避免在将应用部署到生产环境时遇到类似的问题。