前端在 CORS 請求中從后端獲取錯誤 401 - apache/php 配置不足？

Question

我有一個前端，在端口 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包含用於進一步指定 URL 的字符串/user/show_data 。 在我的 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 發行版運行 apache 和 php。

不過，我不完全確定是否是這樣，特別是因為這是我第一次使用 lumen 連接后端和使用 vue.js 連接前端。

編輯：我通過將函數體更改為：

  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)

我該怎么辦？

EDIT2：我現在將以下幾行添加到我的 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

但它沒有幫助。 錯誤消息保持不變。

Answer 1

如果您的后端允許任何主機，大多數瀏覽器無論如何都會阻止您。

Access-Control-Allow-Origin "*"

你也錯過了一個分號

Access-Control-Allow-Origin: "*"

嘗試

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