CORS 政策 laravel vueJS

Question

I have a problem with CORS in laravel and vueJS. i need send parameter to other website with my aplication in laravel, but always return error CORS. I tried create a middleware but i don´t know how i implements my routes with this.

i´m tried add header in index.php to Laravel, returned CORS, i´m tied add this code in petetition axios

let url = "/contrarBono30Min";
                    let bono = "Bono30Min";
                    axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
                    axios.post(url, { 
                                bono: bono,
                                token: csrf_token,
                                } 
                            )

My Controller

    public function contrarBono30MinHome(Request $request){
    $usuario = \Auth::user()->id;
    $bono = $request["bono"];

    $precioBono = \DB::select("SELECT precio FROM bonos WHERE codBono = '1'");


    return redirect('.....URL?bono='.$bono.'&user='.\Auth::user()->nombre.'&nif='.\Auth::user()->nif.'&precio='.$precioBono[0]->precio);
}

action button

contratar: function(){
        $(".contratar").on("click", function(e){

            var bono = $(this).closest("tr").find("td:eq(0)").text();
            var csrf_token = $('meta[name="csrf-token"]').attr('content');

            if(bono == 1){
                let url = "/contrarBono30Min";
                let bono = "Bono30Min";

                axios({
                    method: 'POST',
                    url: url,
                    data: {
                        bono
                    }
                });
            }

            if(bono == 2){
                let url = "/contrarBono1H";
                axios.post(url, {bono:Bono1H})
                        .then((response) => {
                            console.log(response);
                        });
            }

            if(bono == 3){
                let url = "/contrarBono5h";
                axios.post(url, {bono:Bono5H})
                        .then((response) => {
                            console.log(response);
                        });
            }

            if(bono == 4){
                let url = "/contrarBono10H";
                axios.post(url, {bono:Bono10H})
                        .then((response) => {
                            console.log(response);
                        });
            }

            if(bono == 5){
                let url = "/contrarBono24H";
                axios.post(url, {bono:Bono24H})
                        .then((response) => {
                            console.log(response);
                        });
            }

        });

nothing, return CORS...

my URL in axios is external, i need to send info to other web, how pad type, price, name buyers, etc... But redirect i have a CORS ERROR

i don´t know how resolve this problem.

thanks for help

CORS FILE

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

Answer 1

put these lines inside your public/index.php, this is the easiest way.

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');