Load page in a div in swiper slider

Good afternoon Guys,

I need help with my Swiper slider, I tried to load a project in a div but these project's are different but run in the same server , haw can I load each project in the same slide.

I tied this but I get this error in the javascritp console

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://asiquoting.local.com/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

Slider Code

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Australia / Osto</title>

        <!-- Fonts -->
        <link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        <link
                rel="stylesheet"
                href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
        />
        <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

        @livewireStyles()
        <style>
            .swiper{
                width: 1800px;
                height: 800px;
            },
            .osot{
                width: auto;
            }
        </style>
    </head>
    <body class="antialiased">
        @php
            $url ='';
        @endphp
        <!-- Slider main container -->
            <div class="swiper">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                <!-- Slides -->
                    <div class="swiper-slide">Slide 1 Osto Daily

                        <div class="osto">
                            ...
                        </div>
                    </div>
                    <div class="swiper-slide">Slide 2 Australia Quoting</div>
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
            
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            
                <!-- If we need scrollbar -->
                {{-- <div class="swiper-scrollbar"></div> --}}
            </div>
  


        @livewireScripts()
        <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
        <script>
            const swiper = new Swiper('.swiper', {
                // Optional parameters
                   /*  direction: 'vertical',
                    loop: true, */

                    // If we need pagination
                   /*  pagination: {
                        el: '.swiper-pagination',
                    }, */

                    // Navigation arrows
                   navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

                    // And if we need scrollbar
                    /* scrollbar: {
                        el: '.swiper-scrollbar',
                    }, */

                    //Autoplay
                    autoplay: {
                        delay:10000,
                    }
            });
            $(document).ready(function(){
                $('.osto').load('http://asiquoting.local.com/');
            });
            
        </script>
    </body>
</html>

Josadec

3 years ago

Best Answer

Level 1

I found a solution but, I have an other problem with Livewire Poll

This is the solution You will be need write file .htacces this file is located in the path public.htaccess

Add: Header set Access-Control-Allow-Origin "*"

 <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin 'http://australiaquoting.local.com/'
    </IfModule>

 <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin '*'
    </IfModule>

File with added the sentence

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes 
    </IfModule>

    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin 'http://australiaquoting.local.com/'
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

Please or to participate in this conversation.