Stuck with CORS API-CodePudding

I stuck with API request. I sent the request from Vite server to Laravel server, but I got this error

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/checkPrivate/?username=greta&email=&acceptNewLetter=false' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

As you can see I used two servers at once for Laravel I am using http://127.0.0.1:8000 and for Vite server just a different port :3000.

I tried to disable CORS by creating middleware in Laravel

 return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

My Front end request

 axios.get('http://127.0.0.1:8000/api/checkPrivate/', { 
                    headers: {
                        'Accept': 'application/json',
                        'Content-type': 'application/json',
                    },
                    params: {
                    username: this.username,
                    email: this.email,
                    acceptNewLetter: this.acceptNewLetter,
                },
               })
               .then(response => {
                    if(response.data) {
                         console.log(response.data)
                    }
               })

But it didn't helped. Do you have any opinions how I can fix this problem ?

CodePudding user response：

I found solution, problem was not in back end but in Vite server. Vite server blocked to get response from other servers, but I changed Vite config by adding origin and it worked vite.config.js

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    open: true,
    origin: 'http://127.0.0.1:8080/'
  },
  
  
})

CodePudding user response：

This package should fix your issue https://github.com/fruitcake/laravel-cors