React Js:访问REST Web API时处理CORS

Question

我的应用程序有两部分。React项目用于前端，Web API用于服务/后端。

我正在尝试使用Fetch访问React中的GETAPI端点。我的REST API应用程序框架在.net 7.0。我在启动Program.cs中设置了CORS，并尝试在React调用中进行调整。我正在分享我的Web API和React的代码。

我确保我的端点返回结果，我通过Swagger检查。

现在我的问题是-当我试图从React组件访问API时，我得到以下错误。

**Access to fetch at 'http://localhost:5152/api/product' from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.**

我尝试了各种参考，如下面纠正这段代码，但没有帮助。如果我对哪些代码库(API或React)需要修改有了一些了解，那就太好了，我很感激。

我的Web API代码:

控制器:

[Route("api/product")]
[ApiController]
[EnableCors(origins: "http://localhost:5152", headers: "*", methods: "*")]
public class ProductController : ControllerBase
{
[HttpGet]
public IActionResult Get()
{
List<Product> products = new List<Product>();
products = _productService.FetchProducts();
return new JsonResult(products);
}
}

组件代码:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function ProductDropdown() {
const [products, setProducts] = useState([]);
useEffect(() => {
fetch('http://localhost:5152/api/product', 
{
mode: "no-cors",
headers: {
"Access-Control-Allow-Origin": "*"

}
}).then(function (response) {
console.log(response.status);
//Check if response is 200(OK) 
if (response.ok) {
console.log("welcome ");
console.log(response.data);
setProducts(response.data);
alert("welcome ");
}

//if not throw an error to be handled in catch block
//throw new Error(response);
})
.catch(function (error) {
//Handle 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.products}
</option>
))
}
</select>
);
}
export default ProductDropdown;

Answer 1

你必须加上这个

"Access-Control-Allow-Origin": "*"

在服务器端，而不是在React端。

你可以看看这个如何在ASP中启用CORS。网络核心