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

Question

I have a frontend, running on most recent vue on port 5000. Then I have my backend, running on most recent lumen on port 8080. Both are on my localmachine. Later in production, they will be separated on two virtual machines.

Right now, when sending an http request from the frontend to the backend, I get the following error to my devConsole (NOT the vue devtools, but the usual firefox/chrome devtools console!):

Error: Request failed with status code 401

The function returning the axios object executing the http request looks like this:

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

The call looks like this:

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

METHOD_POST contains the string post and USER_LIST contains the string /user/show_data which is used to further specify the URL. In my Lumen backend, it accesses the following route:

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

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

});

The route and the respective controller work, I've tested it with RESTClient https://addons.mozilla.org/de/firefox/addon/restclient/

I think that syntaxwise, everything is fine. Also, the token wasnt expired when I used it, I checked this multiple times. So I think that it might be connected to the CORS-Policy of the apache and/or php. Im running apache and php from the latest XAMPP dist.

Still, I'm not entirely sure if thats it, especially since this is the first time that I connect a backend using lumen and a frontend using vue.js.

EDIT: I managed to activate "withCredentials" for my axios object by changing the function body to:

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

However, now the CORS problem turns up ^^ When sending the http request, I get these error messages to my console:

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.

And

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

And

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

What should I do?

EDIT2: I now added the following lines to my httpd.conf and restarted apache and 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>

I also tried out explicitely specifying the origin to

http://localhost:8080

and

http://localhost:5000

But it didnt help. The errormessage remains the same.

Answer 1

Most browser will block you anyway if your backend allow any host.

Access-Control-Allow-Origin "*"

You are also missin a semi-colon

Access-Control-Allow-Origin: "*"

Try

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