DEV Community

Discussion on: PKCE authenticaton for Nuxt SPA with Laravel as backend

Collapse
 
stefant123 profile image
StefanT123

If you are using laravel version 6.x, then you should add CORS middleware, if you are using laravel 7.x, you should just setup the CORS that's already there.

Collapse
 
thorbn profile image
Thor

I use this in the backend: "fruitcake/laravel-cors": "^2.0",

I can retrive data with postman if I use the header: Authorization: Bearer eyJ0eXAiOiJKV1Q.....

Do i need to set some headers to the nuxt request?

async asyncData({ $axios }) {
const trials = await $axios.$get(process.env.LARAVEL_ENDPOINT + "/api/trials/");
return { trials };
},

if yes how? i see many others have the same problem

Thread Thread
 
stefant123 profile image
StefanT123

You need to send Bearer header with every request

Thread Thread
 
thorbn profile image
Thor

Do you have an example?

I'm trying with this but I cant get the token

async asyncData({ $axios }) {

async asyncData (context) {
const trials = await $axios.$get(process.env.LARAVEL_ENDPOINT + "/api/trials/", {}, { headers: {"Authorization" : Bearer ${context.app.$auth.getToken('local')}} })

I can se the cookie x-access-token in chrome developer tool under application

Thread Thread
 
thorbn profile image
Thor

Now I got the access_token:
const access_token = cookies.get('x-access-token');
console.log(access_token);

    const trials = await $axios.$get(process.env.LARAVEL_ENDPOINT + "/api/trials/", {}, { headers: {"Authorization" : `Bearer ${access_token}`} });

But still no content, only errors:

Access to XMLHttpRequest at 'domain.com/api/trials/' from origin 'app.domain.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
cf5ce039ccd82a3e879b.js:1 GET domain.com/api/trials/ net::ERR_FAILED


Request URL: domain.com/api/trials/
Referrer Policy: no-referrer-when-downgrade
Provisional headers are shown

Thread Thread
 
stefant123 profile image
StefanT123

You should do something like this this.$axios.setToken(access_token, token_type);

Thread Thread
 
thorbn profile image
Thor • Edited

Hi again,

Now I need to "update a Post" and the error comes again, but only on the domain not local:


Console error:
Access to XMLHttpRequest at 'domain.com/api/trials/' from origin 'app.domain.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
600bbbde120028ba59aa.js:1 POST domain.com/api/trials/ net::ERR_FAILED


Laravel log error:
[2020-06-22 16:05:59] local.ERROR: The resource owner or authorization server denied the request. {"exception":"object
[stacktrace].....\TokenGuard.php(149): Laravel\Passport\Guards\TokenGuard->getPsrRequestViaBearerToken


My update submit:

UpdateForm(key) {
event.preventDefault();
var app = this;

    const access_token = cookies.get('x-access-token');
    this.$axios.setToken(access_token, 'Bearer')
    this.$axios.setHeader('Content-Type', 'application/json', [
      'post'
    ])

    this.$axios.$post(process.env.LARAVEL_ENDPOINT+'/api/trials', {
        this.editedItem.employees_dates[key],
        date: this.editedItem.key,
      }
      )
      .then(resp => {
        app.$router.push({ path: "/datetrialupdate" });

      })
      .catch(error => {

        alert("error");
      });
  },
Thread Thread
 
stefant123 profile image
StefanT123

You need to setup the correct domain for the CORS

Thread Thread
 
thorbn profile image
Thor

But it works for GET (posts) and get users but not update content (post)

Thread Thread
 
stefant123 profile image
StefanT123

See if the post request has been enabled for CORS

Thread Thread
 
thorbn profile image
Thor

how can I see that? i'm new to cors, its hard to debug when it works local but not on the server

Thread Thread
 
stefant123 profile image
StefanT123

Read the documentation for fruitcake/laravel-cors

Thread Thread
 
thorbn profile image
Thor

When I read the docs I can't find info on what to change to get post to work . Do you know where to se an example on a Update with "post" have been used, with Nuxt/Passport? almost all examples are just GET

Thread Thread
 
thorbn profile image
Thor • Edited

Now it works. :)

My post looks like:

    const access_token = cookies.get('x-access-token');
    this.$axios.setToken(access_token, 'Bearer')

    this.$axios.setHeader('Content-Type', 'application/json', [
      'post'
    ])

    this.$axios
      .$post(process.env.LARAVEL_ENDPOINT + "/api/trials", {

        grant_type: 'authorization_code',
        client_id: 1,
        ..................

I also removed a / from /api/trials (is was /api/trials/)

I will try later to remove some of the code to see if it all have to be there.