[Vuejs]-How to configure Laravel CORS to accept Nuxt 3 Proxy HTTP request?

by

0👍

For laravel developers, it could be pretty easy to start an SSR Nuxt journey, especially when you write laravel with Homestead

Your SSR Nuxt site may use example.com as domain, also your Laravel API may called by prefix http://example.com/api(routes in the routes/api.php)

The Nginx config could be

    # before (Laravel default)
    location / {
        try_files $uri $uri/ /index.php?$query_string;   
    }

    # after
    proxy_set_header X-Forwarded-For $remote_addr;
    location ~* ^/(api|broadcasting|storage)/ {
        try_files $uri $uri/ /index.php?$query_string;
    }
    location / {
        # the requests will be proxied to SSR Nuxt
        proxy_pass http://127.0.0.1:3000;
    }

In your SSR Nuxt3

$fetch('/api/authenticate', {
    method: 'POST',
    body: form
}).then((res) => {console.log(res)})

After that, you could save your days from handling CORS.

What’s more about proxy_set_header X-Forwarded-For $remote_addr;:

In SSR Nuxt, some requests are sent from front-end server, some requests are send from clients’ browsers. When it comes from the front-end server, it could trigger the Laravel throttle with the IP of itself instead of the IP of client, to avoid this, you may add a proxy_set_header X-Forwarded-For $remote_addr; first. Then add a request header for your Nuxt requests.

In SSR Nuxt2 (with @nuxtjs/axios), plugins/axios.js

export default ({ $axios, store, req, error:nuxtError }) => {
    if (process.server) {
        $axios.setHeader('X-Forwarded-For', req.headers['x-forwarded-for']);
    }
}

In SSR Nuxt3, since there is an official HTTP client included, you don’t need axios, view a solution here

Leave a comment