在我的React-Admin应用程序中，我使用axios调用来检查用户输入的表单值是否已经在db中：
const validateTitleUnique = async (enteredTitle) => {
const encodedTitle = encodeURIComponent(enteredTitle);
const resp = await axios(withAuth({ url: `${API_URL}/store/${encodedTitle}` }));
return resp.data?.length > 0 ? 'Title already exists' : undefined;
};devtools网络选项卡在调用http://localhost:8080/store/abc/d时仍显示CORS Missing Allow Origin错误。
然后，在其下方显示Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/store/abc%2d. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 400.
我认为使用 encodeURIComponent 可以完全避免最初的错误。
知道我错过了什么吗
我已经在API端允许了来自localhost：3000 origin（UI正在运行的地方）的请求，所以我不认为这实际上是一个CORS问题。
2条答案
按热度按时间8ehkhllq1#
CORS基本上只是将请求的来源（域、方案和端口）与服务器上指定的允许列表和资源共享策略进行比较，以确定是否应该阻止请求。URI编码对CORS没有影响。如果您在
http://localhost:3000上本地运行React应用程序，则您调用的API必须允许来自该源的请求。具体如何完成取决于您使用的服务器端框架，但这很容易找到，因为它是一个常见的功能。https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
ercv8c1e2#
您可以向API发送一个curl请求，并检查响应头中的
access-control-allow-origin是否正确设置。有几次，它发生了，后端服务器返回
503或400，在这种情况下，access-control-allow-origin头没有被正确设置。而且浏览器是flagging，一个CORS的问题。如果您附上失败请求的请求和响应头的屏幕截图，这将有助于更好地调查这一点。
谢谢