Cross domain requests

I have a laravel application set up with the api stack of breeze and a nextjs application where i use the useAuth hook of the official laravel nextjs starterkit.

My axios configuration looks like this:

import Axios from 'axios'

const axios = Axios.create({ baseURL: process.env.NEXT_PUBLIC_BACKEND_URL, headers: { 'X-Requested-With': 'XMLHttpRequest', }, withCredentials: true,

})

export default axios

and the hook can be found here: https://github.com/laravel/breeze-next/blob/master/src/hooks/auth.js

locally everything works great because the laravel api and nextjs frontend run on the same domain 'localhost'

however on production both the frontend and api are on completely different domains. This results in axios not setting the X-XSRF-TOKEN header with the request, and the cookies for laravel-session and XSRF-TOKEN not being set on the client.

How can i allow this to work with cross domain?

jaseofspades88

3 years ago

Level 51

Make the request to the correct url.

axios.get('/my-url');

..is only going to make an api call to the current domain suffixed with my-url. With the correct token and credentials you should be able to make a request to the complete url.

axios.get('https://myotherurl.co.uk/my-url');

I don't know how you're authenticating on that other api of course and this is largely sudo code.

Deniz073

3 years ago

Level 1

@jaseofspades88

Note the baseUrl in my axios config that i provided. The requests are made to the correct url and my server receives and processes them correctly. The problem is that axios should send a X-XSRF-TOKEN along with the request and also set the cookies it receives from the server response. It does this locally when both client and server are on the same domain localhost, but not in production when the domains are different.

Please or to participate in this conversation.