为什么我的swiperjs carousel工作在本地主机，而不是在生产(例如使用netlify或vercel).<

Question

这是我的存储库:githubNetlify production: 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>
);
}

<代码>

Answer 1

我不确定你是否遇到了同样的问题，但我在netflix上部署时遇到了Astro.js和swier .js网站的问题。虽然Swiper在本地工作得很好，但当我在netflix上部署它时，我在浏览器控制台遇到了一个CORS错误:"从origin 'https://xx/xxx访问'https://xxx/xxx.js'的脚本"。应用程序'已被CORS策略阻止:请求的资源上没有'Access-Control-Allow-Origin'标头。'

我认为这个问题是由netflix的默认"资产优化"设置引起的，该设置自动捆绑JavaScript文件，可能导致它们托管在不支持CORS的域上。一旦我禁用了这个设置，网站就会像预期的那样运行，就像在本地运行一样。