前端在 CORS 请求中从后端获取错误 401 - apache/php 配置不足？

Posted 2023-03-04

【中文标题】前端在 CORS 请求中从后端获取错误 401 - apache/php 配置不足？

【英文标题】：Frontend gets Error 401 from Backend in CORS request - apache/php insufficiently configured?

【发布时间】：2020-06-22 06:07:44

【问题描述】：

我有一个前端，在端口 5000 上的最新 vue 上运行。 然后我有我的后端，在端口 8080 上的最新流明上运行。 两者都在我的本地机器上。稍后在生产中，它们将在两个虚拟机上分开。

现在，当从前端向后端发送 http 请求时，我的 devConsole 收到以下错误（不是 vue devtools，而是通常的 firefox/chrome devtools 控制台！）：

Error: Request failed with status code 401

返回执行http请求的axios对象的函数如下所示：

function fetchData(method, slug, payload) 
  return axios[method](`$API_ENDPOINT$slug`, payload);

调用如下所示：

fetchData(METHOD_POST, USER_LIST, "someToken").then((res)=>
        return res
      )

METHOD_POST 包含字符串post，USER_LIST 包含字符串/user/show_data，用于进一步指定 URL。在我的 Lumen 后端，它访问以下路由：

$router->group(['prefix' => 'user', 'middleware' => 'auth'], function() use ($router)

    $router->post('/show_data', 'UserController@getData');

);

路由和相应的控制器工作，我已经用 RESTClient https://addons.mozilla.org/de/firefox/addon/restclient/ 测试过

我认为从语法上讲，一切都很好。另外，令牌在我使用时没有过期，我检查了多次。 所以我认为它可能与apache和/或php的CORS-Policy有关。 我从最新的 XAMPP dist 运行 apache 和 php。

不过，我不完全确定是不是这样，特别是因为这是我第一次使用 lumen 连接后端和使用 vue.js 连接前端。

编辑：我通过将函数体更改为：

成功地为我的 axios 对象激活了“withCredentials”：

  axios.defaults.headers.withCredentials = true;
  return axios[method](`$API_ENDPOINT$slug`, payload);

但是，现在 CORS 问题出现了^^ 发送 http 请求时，我的控制台收到以下错误消息：

Access to XMLHttpRequest at 'http://localhost:8080/user/show_data' from origin 'http://localhost:5000' 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.

还有

xhr.js:178 POST http://localhost:8080/user/show_data net::ERR_FAILED

和

createError.js:16 Uncaught (in promise) Error: Network Error
    at t.exports (createError.js:16)
    at XMLHttpRequest.d.onerror (xhr.js:83)

我该怎么办？

编辑2： 我现在将以下几行添加到我的 httpd.conf 并重新启动 apache 和 lumenproject：

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Max-Age: 360
Header set Access-Control-Allow-Credentials: true
Header set Access-Control-Allow-Methods: *
Header set Access-Control-Allow-Headers: Origin
Header set Access-Control-Expose-Headers: Access-Control-Allow-Origin
</IfModule>

我也尝试过明确指定来源

http://localhost:8080

和

http://localhost:5000

但它没有帮助。错误消息保持不变。

【问题讨论】：

听起来它可能没有随请求发送一些必要的身份验证凭据，例如会话 cookie 或其他东西。尝试将 withCredentials: true 添加到您的 axios 请求选项中。

使用axios[method] 在这里开始的意义不大，我认为 - 因为根据方法，您需要传递的参数是不同的。 get 采用 url 和 config，post 采用 url，data 和 config。您至少需要在 fetchData 函数中进行两种不同的调用，具体取决于方法。 withCredentials 在任何情况下都属于config。

preflight 请求是使用 OPTIONS 方法发出的 - 但看起来您目前仅使用路由器设置处理 POST 请求。

“但为什么要使用 OPTIONS？” - 因为这就是 CORS 的工作原理。 developer.mozilla.org/en-US/docs/Glossary/Preflight_request

是的，浏览器会在必要时自动发出此飞行前请求。

【参考方案1】：

如果您的后端允许任何主机，大多数浏览器都会阻止您。

Access-Control-Allow-Origin "*"

你也少了一个分号

Access-Control-Allow-Origin: "*"

试试

Access-Control-Allow-Origin: "yourorigindomain.com"