当开发中没有问题时，React构建会导致CORS错误

Question

我已经构建了一个React应用程序(我的第一个React程序(，以及一个为UI提供数据的C#.NET Core 3.1 Web API。我正在同一服务器(Windows 10(上部署API和React应用程序，其中端口3030用于API，端口3029用于React构建；npm运行构建"；。UI的IIS站点指向生成目录。

在我的开发环境中，使用部署的API运行应用程序是有效的，不需要代理。部署时，我的屏幕加载，但没有通过FETCH检索记录，而是出现了CORS错误：

Access to fetch at 'http://localhost:3030/api/checking' from origin 'http://localhost:3029' has been blocked by CORS policy: 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.

为什么在使用热负载的Visual Studio代码的开发中运行React时，这会起作用？为什么在部署后不起作用？更重要的是，我该如何让它发挥作用？

Startup.cs中的API代码

ConfigureServices方法

services.AddCors(options => {
options.AddDefaultPolicy(builder => {
builder.WithOrigins(Configuration["AppSettings:CorsUrl"])
.AllowAnyHeader()
.AllowAnyMethod();
});
});

配置方法

app.UseCors();

AppSettings.js代码

"AppSettings": {
"CorsUrl": "http://localhost:3029"
}

反应

我将我的url存储在根级别的.env文件中，如下所示。

REACT_APP_API_URL=http://localhost:3030/api/checking

React Fetch命令

在我的checking.js组件中，加载数据并执行FETCH。

const SERVER_URL=`${process.env.REACT_APP_API_URL}`
function Checking() {
const [rowData, setRowData] = useState([]);
const [newData, setNewData] = useState(initialState);
const [displayModal, setModalDisplay] = useState(false);
const columnDefinitions = Columns();
const rowDataRef = useRef(rowData);
useEffect(() => {
fetch(SERVER_URL)
.then((response) => response.json())
.then((rowData) => {
setRowData(rowData)
rowDataRef.current = rowData;
});
}, []);
.
.
.

Answer 1

您需要设置Access Control Allow Origin标头。请尝试以下方法来解决此错误。

1.清除您的cookie，并通过Mod Header扩展添加Access Control Allow Origin'：'*'，然后请再次尝试检查修复程序。

2.试着使用中间界面来控制你的请求并引导他们纳入特殊规则。

app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
next();
});

Answer 2

事实证明，我注意到一个组件行为不端(ag网格(，导致我运行npm更新。完成后，我重新部署了构建，现在一切都正常了。我相信更新"解决"了这个问题。