React应用中出现CORS策略阻塞时如何处理和重定向

Question

我有一个接收 result.text 的函数（这是来自 qr 扫描相机的字符串，例如 string:565650）。当我得到结果时，我将其保存在 const productString 中，然后我使用该字符串发出获取请求。如果回复没问题，我会收到我的产品并将其添加到我的结帐袋中，直到那个地方一切正常。

此外，当我将扫描非产品 - 二维码时，这意味着我的 result.text 不会得到响应，我想在 404 页面中重定向用户。此外，我收到 Cors 政策错误。

我想在扫描后如果没有成功重定向 404 页面中的用户，我的代码在该函数下方。

  const handleScanResult = (result) => {
    setLoading(true);
    setProductString(formatString(result.text))
    fetchData(`${API_URL}/products/${formatString(result.text)}`)
      .then((data) => {
        handleAddMemo(data);
        setLoading(false);
        setOpenAddMemoDialog(true);
        handleClose();
      })
      .catch((ex) => {
        setLoading(false);
        console.log(ex,"ex")
      })
  };

Answer 1

Cors 是一种浏览器安全机制，您不能跳过它...其实您可以尝试，但您会遇到问题，请参阅 Trying to use fetch and pass in mode: no-cors

我建议你遵守规则。所以要么：

您在同一个主机+端口
你把像 nginx 这样的代理放在同一个主机+端口上服务
您更改 api 以遵循所需的规则，主要是 headers 和选项方法。

这里有一个很好的解释：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

如果您想尝试一下，这里有一个简单的 Nginx 配置文件

    server_name myapp.localhost;

    listen 80;

    location /api/myApp {
        proxy_pass http://127.0.0.1:15000;
        #Change 15000 to the API port you use
    }

    location / {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:17050;
        #Change 17050 to the APP port you use
    }
}

React应用中出现CORS策略阻塞时如何处理和重定向

How to handle and redirect when blocked by CORS policy occurs in React application

javascript

reactjs

function

fetch