-2

I am new to laravel-nova and vuejs. I am sending a request to my private-api swagger. I have tried everything i could. I changed the conf file of my apache server given here mozailla documentation on cors. I have tried putting

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

while sending the request. it did not work. this is my vue code in laravel-nova Vue tool.

<script>
import VueButtonSpinner from 'vue-button-spinner';
export default {
components: {
    VueButtonSpinner
},
data() {

    return {

        showTable: false,
        token_utente: "7e407066-1c6a-11ec-9bbe-0aae38056063",
        encoding: "na",
        document_type: "na",
        indirizzo: "na",
        toponimo: "na",
        via: "na",
        comune_registro: "na",
        cap: "na",
        provincia_registro: "na",
        codice_fiscale: "na",
        partita_iva: "na",
        ccia: "na",
        nrea: "na",

    };
},
metaInfo() {
    return {
      title: 'RegistroImprese',
    }
},
mounted() {
    //
},
methods: {
    onSubmit() {
        this.isLoading = true
        let param = {};
        param = {
            'token_utente': this.token_utente,
            'codici_servizi': [ this.codici_servizi ],
            'document_type': this.document_type,
            'encoding': this.encoding,
            'partita_iva' : this.partita_iva,
            'ccia' : this.ccia,
            'nrea' : this.nrea,
            'solo_sedi' : this.solo_sedi,
            'escludi_cessate' : this.escludi_cessate,
        }
        Nova.request().post('my-private-api', param).then(response =>
        {
            this.data = response.data;
            this.isLoading = false;
            this.status = true;
            setTimeout(() =>
            {
                this.status = ''
            }, 2000);

        }).catch(error =>
        {
            console.error(error)
            this.isLoading = false
            this.status = false //or error
        })
    },
}
}
</script>
tauzN
  • 5,162
  • 2
  • 16
  • 21
Qasim Ali
  • 587
  • 2
  • 11
  • 28
  • "I have tried putting" - this doesn't make sense. Access-Control-Allow-Origin is supposed to be added on server side, it doesn't make sense on client side because a client can't have control over it. The problem is still supposed to be solved on server side – Estus Flask Oct 20 '21 at 08:11
  • i am also thinking the same. when i try to curl my API the response is HTTP/2 404. Can you please tell me something about this? – Qasim Ali Oct 20 '21 at 08:13

1 Answers1

0

How enable cors on apache server: https://ubiq.co/tech-blog/enable-cors-apache-web-server/

if the problem still exists:

Try to add, on the serverside (in your case laravel), a Cors Middleware

Step 1 php artisan make:middleware Cors

Step 2 Go to the new middleware and change the return value of the handle method as follows:

public function handle($request, Closure $next)
{
return $next($request)
    ->header('Access-Control-Allow-Origin', "*")
    ->header('Access-Controll-Allow-Methods', "GET, POST")
    ->header('Access-Controll-Allow-Headers', "Accept,Authorization,Content-Type");
}

Step 3 Add the new Cors Middleware to the protected member variable $middleware in Kernel.php:

protected $middleware = [
    \App\Http\Middleware\TrustProxies::class,
    \Fruitcake\Cors\HandleCors::class,
    \App\Http\Middleware\CheckForMaintenanceMode::class,
    \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
    \App\Http\Middleware\TrimStrings::class,
    \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    \App\Http\Middleware\Cors::class,
];

The newly created middleware is now called with every request by mounting it in the kernel. This has the effect that the response header with the header attributes: Access-Control-Origin, -Methods and -Headers are sent along modified. Thus, the client browser knows: "Don't panic, everything is in the green area. He and we are allowed to do that".

Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79