React调用.NET 7 Web API时的CORS跨域问题求助

1. Web API端核心错误 #

你的[EnableCors]属性配置的允许源是API自身地址http://localhost:5152，但实际发起请求的前端源是https://localhost:3000，这直接导致CORS校验失败。

修改控制器代码 #

将[EnableCors]的允许源替换为前端地址：

[Route("api/product")]
[ApiController]
// 允许前端的HTTPS地址，注意协议要和前端一致
[EnableCors(origins: "https://localhost:3000", headers: "*", methods: "*")]
public class ProductController : ControllerBase
{
    [HttpGet]
    public IActionResult Get()
    {
        List<Product> products = _productService.FetchProducts();
        return new JsonResult(products);
    }
}

补充：Program.cs的CORS配置检查 #

确保后端已正确注册并启用CORS中间件，示例如下：

var builder = WebApplication.CreateBuilder(args);

// 注册CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactOrigin",
        policy => policy.WithOrigins("https://localhost:3000")
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

builder.Services.AddControllers();

var app = builder.Build();

// CORS中间件必须放在路由和控制器之前
app.UseCors("AllowReactOrigin");

app.UseRouting();
app.MapControllers();

app.Run();

如果用了上述全局策略，控制器上的[EnableCors]可改为[EnableCors("AllowReactOrigin")]，保持配置统一。

2. React前端代码错误 #

• 移除mode: "no-cors"：该模式会让浏览器返回不透明响应，无法读取接口返回的数据。
• 删除请求头中的Access-Control-Allow-Origin：这个头是服务器返回给浏览器的，前端请求添加它无效。
• 补充response.json()解析步骤：fetch默认不会自动解析JSON数据。

修正后的前端代码：

import React, { useState, useEffect } from 'react';

function ProductDropdown() {
const [products, setProducts] = useState([]);

useEffect(() => {
    fetch('http://localhost:5152/api/product')
        .then(response => {
            if (!response.ok) {
                throw new Error(`请求失败：${response.status}`);
            }
            return response.json(); // 解析JSON响应
        })
        .then(data => {
            console.log(data);
            setProducts(data);
        })
        .catch(error => {
            console.log('请求出错:', error);
        });
}, []);

return (
    <select className="prodSelect">
        <option value="0">Select product</option>
        {products.map((p) => (
            <option key={p.productId} value={p.productId}>
                {p.productName} {/* 注意：原代码的p.products应为产品名称字段，比如p.productName */}
            </option>
        ))}
    </select>
);
}

export default ProductDropdown;

额外注意事项 #

• 前端使用https而后端用http可能触发浏览器混合内容警告，调试阶段可临时将React改为http启动（设置HTTPS=false），或给后端配置HTTPS证书。
• 确认后端服务确实在http://localhost:5152运行，Swagger能访问不代表CORS配置正确，必须用前端域名发起请求才会触发CORS校验。

内容的提问来源于stack exchange，提问作者adventureworks