解决 CORS 跨域访问被阻止的问题

问题 现在有一个现成网站，想要直接重新使用现在的api完成界面的二次开发；

网站是cookie认证；不支持跨域请求；

Access to XMLHttpRequest at 'http://www.xxx.com/api/a1' from origin 'http://localhost:5666' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

总结：

代理模式是最科学的解决方案；直接无缝衔接cookie提交。
尝试了修改后端代码，支持跨域请求，支持跨域cookie提交，结果，网站是http是的，浏览器有个安全问题cookie不同源必须https。坑呀！！！
无奈增加了cookie+jwt双认证，这样就可以解决这个问题了。可是这修改后台代码是必然的了。

当我看到本地代理方案。这才是正解呀！！！😮‍💨😮‍💨😮‍💨😮‍💨😮‍💨😮‍💨😮‍💨（一顿操作猛如虎，定睛一看原地杵！还是要好好学习！）

解决 CORS 跨域访问被阻止的问题

您遇到的错误表明您的前端应用（运行在 http://localhost:5666）尝试访问 http://www.xxx.com 的 API 时被浏览器的同源策略阻止了。

解决方案

1. 后端解决方案（如果您能控制 API 服务器）

在 .NET 8 API 项目中，确保已正确配置 CORS：

// Program.cs
var builder = WebApplication.CreateBuilder(args);

// 添加 CORS 服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowLocalhost",
        policy =>
        {
            policy.WithOrigins("http://localhost:5666") // 您的前端地址
                  .AllowAnyHeader()
                  .AllowAnyMethod();
        });
});

var app = builder.Build();

// 使用 CORS 中间件（注意顺序）
app.UseRouting();
app.UseCors("AllowLocalhost");
app.UseAuthorization();

app.MapControllers();
app.Run();

2. 如果无法修改后端 API

方案 A：使用代理服务器

1. 在您的开发服务器（如 Vue CLI、React 或 Angular）中配置代理：

vue.config.js (Vue CLI)

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

然后在前端代码中请求 /api/... 而不是直接请求目标服务器。

方案 B：使用 CORS 浏览器插件（仅开发环境）

安装 Chrome 插件如 "Allow CORS: Access-Control-Allow-Origin" 临时禁用 CORS 限制。

方案 C：JSONP（如果 API 支持）

function handleResponse(data) {
  console.log(data);
}

const script = document.createElement('script');
script.src = 'http://www.xxx.com/api/a1&callback=handleResponse';
document.body.appendChild(script);

3. 前端临时解决方案（不推荐生产环境）

// 使用 fetch 的 no-cors 模式（有限制）
fetch('http://www.xxx.com/api/a1', {
  mode: 'no-cors'
})
.then(response => {
  // 注意：no-cors 模式下 response 将是 opaque 的，无法读取内容
  console.log('Request sent (but can\'t read response)');
})
.catch(error => console.error('Error:', error));

检查清单

1. 确认后端 API 已正确配置 CORS 头部
2. 检查是否有中间件顺序问题（UseCors 必须在 UseRouting 之后）
3. 确保没有其他中间件（如认证中间件）干扰 CORS 头部
4. 如果是 HTTPS 网站访问 HTTP API，现代浏览器会阻止这种混合内容请求

验证 CORS 是否配置成功

使用 curl 检查响应头：

curl -I "http://www.xxx.com/api/a1"

应该能看到类似这样的响应头：

Access-Control-Allow-Origin: http://localhost:5666
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

如果 API 完全不在您的控制范围内，代理服务器方案是最可靠的解决方案。