多次调用后没有 Access-Control-Allow-Origin 编辑 > Axios 网络错误捕获

Posted 2023-03-04

【中文标题】多次调用后没有 Access-Control-Allow-Origin 编辑 > Axios 网络错误捕获

【英文标题】：No Access-Control-Allow-Origin after many calls edit > Axios network error catch

【发布时间】：2021-03-18 05:50:52

【问题描述】：

我经常用谷歌搜索这个问题，我想我已经插入了所有我知道是多余的但我很绝望的东西。 在我的服务器中，我添加了：

app.use(cors())

和

app.use(function (req, res, next) 
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS');
  next();
);

在路线中，我添加了：

router.use(['/api/', '/api/:page?'], (req, res) => 
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin",
    "X-Requested-With",
    "Content-Type",
    "Accept",
    "X-Requested-With,content-type"
  );
  res.setHeader("Access-Control-Allow-Credentials", true);

 //code and stuff
)

我在 nginx 中添加了：

    if ($request_method ~* "(GET|POST)") 
      add_header "Access-Control-Allow-Origin"  *;
    

    if ($request_method = OPTIONS ) 
      add_header "Access-Control-Allow-Origin"  *;
      add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
      add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
      return 200;
    

前端调用：

    return axios.post("https://example.com/api/", data, 
        headers: 
          "Content-Type": "multipart/form-data",
          "Access-Control-Allow-Origin": '*',
          "Access-Control-Allow-Method": 'GET,PUT,POST,DELETE,PATCH,OPTIONS'
        ,
      )
      .then((res) => 
        console.log(res.data);
    )

我不确定 cors 是否是问题所在，因为路由工作正常，但经过几次请求后，我收到此错误，并且它一直存在，直到我重新启动服务器。

123.ngrok.io/:1 Access to XMLHttpRequest at 'https://example.com/api' from origin 'https://123.ngrok.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:83)

因此，总而言之，该路线运行良好，但出现该错误后，它不会消失，直到重新启动。 提前谢谢！

【问题讨论】：

考虑以下想法：一段时间后，您的应用程序逻辑（“代码和东西”）会中断并且无法正确处理。因此，您创建的响应（或为您创建更好的响应）缺少 CORS 所需的标头并被客户端阻止。但这在很大程度上取决于您的快速设置。

@CKE，感谢您的评论。我没有考虑到这一点，我将进一步深入研究该领域。

查看此页面上的“编写错误处理程序”部分：expressjs.com/en/guide/error-handling.html。定义一个错误处理程序（最后）并像在第一个 app.use(...) sn-p 中一样应用标头。不要忘记调用 next() 来应用 express 的默认错误处理程序。它应该向您发送包含堆栈跟踪的畅通响应（仅限非生产环境）。

在前端附加Access-Control-Allow-xxx header 是没有用的和浪费的。这些标头只能由服务器添加，因为它们仅由浏览器在服务器响应时使用。将它们设置在前端除了表明您可能不了解它们的工作原理之外，什么也做不了。

另外，当您在前端设置content-type 时，content-type 必须代表您在 POST 正文中发送的数据类型，而不是您期望返回的数据类型。您发送的 data 变量真的是 multipart/form-data 吗？

【参考方案1】：

我发现了这个问题。 所以我有时会收到错误，但事实证明，每次我上传一个大文件时都会发生这种情况。

后端： 我收到的回复是正确的，它与 cors() 或标头无关，因为它没有触发标头，而实际上我的 /api 的路由配置中根本没有触发任何内容。该路线的第一行甚至没有简单的控制台日志。

FRONTEND：我捕获到该路由的 axios 发布请求中的前端错误给了我一个我无法理解的模糊错误。经研究，设计为不获取状态码：The Discussion on Github with Axios。

我的 catch 错误日志：

Access to XMLHttpRequest at 'http://localhost/' from origin 'https://123.ngrok.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
thatFetchRequestCatch.js:91 Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:83)

Postman：我应该先使用 Postman 来看看真正的错误是什么。原来是：413 Request Entity Too Large

我查看了 NGINX 的错误日志 2020/12/10 13:51:39 [error] 1376#12612: *60 client intended to send too large body: 3897316 bytes, client: 127.0.0.1, server: localhost, request: "POST /api HTTP/1.1", host: "localhost"

所以解决方案是添加 client_max_body_size 20M; 到我在 http 下的 NGINX 配置文件，我很高兴。

所以真正的问题是 NGINX，但是对于即使在配置您的 cors() 之后使用 Axios 收到此错误的其他人，请使用 postman 尝试您的路线或查看您的 NGINX 日志以查看真正的错误。

祝遇到此问题的其他人好运。