Response body is not available to scripts (Reason: CORS Missing Allow Origin) in Laravel and Vue Js App

developing Laravel 10 + Vue Js 3 application both projects files are separately. I have following api.php login route as well

Route::post('/login', [LoginController::class, 'submit']);

and using following Login in vue.js

const handleLogin = () => {
    axios.post('http://localhost/api/login', getFormattedCredentials())
        .then((response) => {
            console.log(response.data)
            waitingOnVerification.value = true
        })
        .catch((error) => {
            console.error(error)
            alert(error.response.data.message)
        })
}

but when I try to use log in vue front end it is inspect console encounted following error msg as response

OPTIONS http://localhost/api/login

Response body is not available to scripts (Reason: CORS Missing Allow Origin)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/api/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.

how to fix this problem?

kgsint

2 years ago

Level 10

Which package are you using for API authentication(Sanctum or Passport)?

Please make sure to check your laravel app is running at http://localhost or http://localhost:8000.
Also, if you are trying to authenticate your SPA, you may want to fetch csrf cookie before making a POST request

Flex

2 years ago

Level 4

@kgsint using Sanctum yes I am using http://localhost:8000

kgsint

2 years ago

Level 10

@flex If your laravel app is running on port 8000, then, you should request to http://localhost:8000

axios.post('http://localhost:8000/api/login', getFormattedCredentials())
.then(() => ...)

also make sure your laravel-app/config/cors.php is configured properly,

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
     'allowed_origins' => ['*'] // or your origin such as ['http://localhost:3000', 'http://localhost:5173', ...],
    // ...
   'supports_credentials' => true,
];

and later down the line, you may want to fetch csrf cookie when trying to authenticate,

// predefine base URL
axios.defaults.baseURL = "http://localhost:8000"
// cors and stuff
axios.defaults.withCredentials = true
// axios.defaults.withXSRFToken = true;

const handleLogin = async() => {
	try {
    // https://laravel.com/docs/10.x/sanctum#csrf-protection
    await axios.get('/sanctum/csrf-cookie')
   // authenticate
	const response = await axios.post('/api/login', getFormattedCredentials())
    console.log(response.data)
     waitingOnVerification.value = true
																																																																																																																																																																																																																								 
    }catch(e) {
	//																																																																																																																										
    }																																			
}

https://laravel.com/docs/10.x/sanctum#spa-authentication

Hope this helps

Please or to participate in this conversation.