javascript 为什么我的swiperjs carousel可以在localhost中工作,但不能在生产环境中工作(例如使用netlify或vercel)

toe95027  于 2023-05-21  发布在  Java
关注(0)|答案(1)|浏览(114)

这是我的repository:github Netlify生产:netlify
在我的代码中,我有分页模块,这很好。但自动播放模块有一个不工作
当我去其他部分,回到家里部分自动播放开始工作

import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination, EffectCoverflow } from 'swiper';

// Import Swiper styles
import 'swiper/scss';
import 'swiper/scss/autoplay';
import 'swiper/scss/pagination';
import { carouselData } from '../../data/carouselData';

export default function CarouselSwiper() {
  return (
    <div className='carouselSwiper__parentDiv'>
      <Swiper
        className='carouselSwiper__Swiper'
        modules={[Autoplay, Pagination, EffectCoverflow]}
        slidesPerView={1}
        autoplay={{ delay: 2500, disableOnInteraction: false }}
        pagination={{
          clickable: true,
        }}
        loop={true}
        speed={500}
      >
        {carouselData.map(({ id, title, src }) => {
          return (
            <SwiperSlide key={id}>
              <img
                className='carouselSwiper__img'
                src={`assets/Fondos/${src}`}
                alt={title}
              />
            </SwiperSlide>
          );
        })}
      </Swiper>
    </div>
  );
}
jhiyze9q

jhiyze9q1#

我不确定你是否遇到了同样的问题,但我在Netlify上部署Astro.js和Swiper.js网站时遇到了问题。虽然Swiper在本地工作正常,但当我在Netlify上部署它时,我在浏览器控制台中遇到了CORS错误:'从源' https://xx/www.example.com '访问' https://xxx/xxx.js '处的脚本xxx.app已被CORS策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。
我认为这个问题是由Netlify的默认“资产优化”设置引起的,该设置会自动捆绑JavaScript文件,可能会导致它们托管在不支持CORS的域上。一旦我禁用了这个设置,网站就能按预期工作,与本地的工作方式类似。

相关问题