How to close access to the API and let it only from the application?

Question

API

So: there is an application, everything is closed by normal authorization, web:authmiddleware, the user is logged in, doing something to himself.
There is a list data view that needs to be built on Vue, for the convenience of sorting, filtering, etc.
How to authorize a Vue request in api without issuing additional JWT tokens to a regular session, without piling up bicycles and keeping the process transparent.
API and application - one app on Laravel. web:authmiddleware doesn't work for api section.

Answer 1

Just make a route in web.php and call it with ajax as usual. Well csrf the current should be transferred all the same.
The session will be pulled up as usual when other "server" routes are running.

Answer 2

If I understand correctly, then perhaps cors? That is, if you only need to allow access to api from one place, for example, by host or port

Answer 3

It may help to add the middleware necessary for the sessions to the api route group in kernel.php. Well, in auth.php , of course, change the guard to session.

Answer 4

What hinders the use of a single authorization server?
For example, I implemented it in the following way.
Here is my stack.
Nuxt
Symfony
I want to get categories
Route /categories.get is protected.

var request = require("request");

var options = { method: 'GET',
  url: 'http://127.0.0.160:8091/categories.get',
  qs: { lvl: '0', offset: '0', count: '100' },
  headers: 
   {
     'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpYXQiOjE1NzMyMTE3NzAsIm5iZiI6MTU3MzIxMTc3MCwiZXhwIjoxNTczMjE1MzcwLCJ1c2VyX2VtYWlsIjoiYWRtaW5AbWFpbC5jb20ifQ.0-VX8Pbv9l-ELXOoPV_6DTP1166X5DUvHZobXHh5xed2FRbNbbGMFrrai7khnApfywQeZjzasrqVwmcgrDq4kg',
     'cache-control': 'no-cache' 
   } };

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  console.log(body);
});

Outcome.
API and Nuxt are protected by the same token.
How is routing secured in Nuxt?

import {ACCESS_TOKEN} from "../store/mutation-types"


export default async function ({store, redirect, $axios}) {
  
  const token = store.getters[ACCESS_TOKEN]
  console.log(token)
  if (!token) {
    return redirect("/login")
  }
  
  await $axios.$post(`${process.env.api}/security.checkAccessToken`, {token})
    .then(({code}) => {
      if (code === 0) {
        console.info("Token verified!")
        return redirect()
      }
      console.info("Token not verified!")
      return redirect("/login")
    }).catch((e) => {
      console.info(e)
      return redirect("/login")
    })
}

My answer:
Unified authorization server.