Axios uses wrong port about nuxt-laravel

[mentAl-maZe]

Hi @DemonsHW

Theoretically this is the expected behaviour as all proxying should be handled by @nuxtjs/proxy.

The idea is that you do not have to adjust configuration when switching between dev and build

[NikitaZelenskis]

If dev server is on port 3001 and axios tries to fetch something from port 3000 i get CORS error.

[mentAl-maZe]

With the default configuration the nuxt dev server is on 3000 and the Laravel dev server is on 3001.
Never had a CORS issue before... may be due to update.

Can you provide some context:
Nuxt Version
Laravel Version
Your nuxt config (if you don't mind)

PS: Are you maybe trying to access the dev server from port 3001?
The laravel server is only exposed so that nuxt can proxy to it, use port 3000 for development: all routes are redirected from nuxt to laravel and laravel then resolves the route ("proxy" back to nuxt if it is a nuxt route, or resolve the route internally if configured accordingly)

I wrote "proxy" in quotes because all that laravel does (at least if you use m2s/laravel-nuxt) is grab the contents from the nuxt server with a file_get_contents

[NikitaZelenskis]

As far as i know it build in browser feature.

Nuxt Version: 2.13.3
Laravel Version: 7.19.1

nuxt.config does not have anything special if you really need it i can share it.

[NikitaZelenskis]

PS: Are you maybe trying to access the dev server from port 3001?

Yes but when i try to use port 3000 it doesn't go through laravel and all my api calls are whatever is in file_get_contents

Edit: response is just standard nuxt page not found html

[mentAl-maZe]

Ok, so, a few things to check:

• The module does not yet support universal mode, but in theory it should give you a disabled message if your nuxt is configured that way
• In Laravel (m2s/laravel-nuxt): The config('nuxt.source') setting should read the NUXT_OUTPUT_PATH environment variable (this get's overwritten in development to point to the nuxt dev server), can you maybe share your nuxt route implementation
• In Laravel (m2s/laravel-nuxt): The config('nuxt.prefix') setting should correspond to your router.base setting in nuxt.config

[NikitaZelenskis]

Base is set to '/' in both nuxt.config and laravel config

web.php:

//above are some api's
Route::get(
  '/{path?}',
  function($request) {
    return file_get_contents(public_path('spa.html'));
  }
)->where('path', '.*')->name('nuxt');

But whenever i use port 3000 it doesn't matter what is in web.php beacause it is never reached.

[mentAl-maZe]

I see your problem:
You have to use the environment variable in order for the dev functionality to work

Route::get(
  '/{path?}',
  function($request) {
    return file_get_contents(env('NUXT_OUTPUT_PATH', public_path('spa.html')));
  }
)->where('path', '.*')->name('nuxt');

[NikitaZelenskis]

I see your problem:
You have to use the environment variable in order for the dev functionality to work

Route::get(
  '/{path?}',
  function($request) {
    return file_get_contents(env('NUXT_OUTPUT_PATH', public_path('spa.html')));
  }
)->where('path', '.*')->name('nuxt');

Thanks for reply but like i said it doesn't matter what is in web.php because it never gets there.

I just changed it and it still doesn't work.
I get nuxt "This page could not be found" response from all laravel routes in web.php.

[mentAl-maZe]

Hmm.... 🤔
Are you using nuxt programmatically (with an express server or something similar)?

[NikitaZelenskis]

Hmm.... 🤔
Are you using nuxt programmatically (with an express server or something similar)?

I'm not sure what you mean by that.
I use "npm run nuxt:dev"

[mentAl-maZe]

Can you please post the scripts section of your package.json

[NikitaZelenskis]

Can you please post the scripts section of your package.json

"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"nuxt:dev": "nuxt",
"nuxt:build": "nuxt build",
"nuxt:generate": "nuxt generate",
"nuxt:start": "nuxt start"
},

[mentAl-maZe]

Weird... 😕
In theory it should work...

I just changed it and it still doesn't work.
I get nuxt "This page could not be found" response from all laravel routes in web.php.

This does actually sounds as if it works...
If you have other routes can you maybe try to set router.base = '/app/' and Route::get('/app/{path?}')

PS: have you used the stater repo (https://github.com/m2sd/nuxt-laravel-starter)?

[NikitaZelenskis]

This does actually sounds as if it works...
If you have other routes can you maybe try to set router.base = '/app/' and Route::get('/app/{path?}')

Route answer's with Cannot GET ...

Still doesn't go through laravel.

PS: have you used the stater repo (https://github.com/m2sd/nuxt-laravel-starter)?

I had a project already thats why i didn't use it but i will look into it.

[GautierDele]

You don't really need to set the base path in laravel's routes:

Route::post(
    'stripe/webhook',
    '\App\Http\Controllers\WebhookController@handleWebhook'
);

Route::get('{path}', '\\'.Pallares\LaravelNuxt\Controllers\NuxtController::class)->name('nuxt')->where('path', '^(?!nova|admin.*$).*');

Laravel's routes go through api before web so when the router goes to the end i'm sending him to Nuxt.

Going through proxy is mandatory in this case, you can find my example below:

axios: {
    prefix: '/api',
    proxy: {
      '/api': process.env.API_HOST
    },
    https: process.env.API_HTTPS === 'true'
  },

To force nuxt not to be at the root:

router: {
    base: '/app/'
  }

Can you provide us maybe a screenshot of the error + host asked + current host ?

[NikitaZelenskis]

If base is set to "/app/":

• web.php:

Route::get('/foo', function(){
  return "bar";
});

Route::get(
  '/app/{path?}',
  function($request) {
    // Fetch and display the page from the render path on nuxt dev server or fallback to static file
    return file_get_contents(env('NUXT_OUTPUT_PATH', public_path('app/spa.html')));
  }
)->where('path', '.*')
// Redirect to Nuxt from within Laravel
// by using Laravels route helper
// e.g.: `route('nuxt', ['path' => '/<nuxtPath>'])`
->name('nuxt');

Requesting get from "http://localhost:3000/foo" results in "Cannot GET /foo"

If base is set to '/':

Requesting get from "http://localhost:3000/foo" results in:

[NikitaZelenskis]

axios: {
    prefix: '/api',
    proxy: {
      '/api': process.env.API_HOST
    },
    https: process.env.API_HTTPS === 'true'
  },

Doesn't seem to help

[NikitaZelenskis]

PS: have you used the stater repo (https://github.com/m2sd/nuxt-laravel-starter)?

nuxt-laravel-starter seems to be working. I will try to find out what is different about my project and nuxt-laravel-starter