在我的nextjs项目中，我使用next/image中的<Image />组件。我正在访问托管在digitalOcean服务器中的CDN中的图像。出于某种原因，CDN的CORS策略无法正常工作，因此无法在我的浏览器中加载图像(使用Chrome(。当我使用nextjs的默认加载程序时，图像工作得很好，因为我已经看到next/image的工作方式就像从同一个来源发送请求一样(https://localhost:3000/_next/image?url=imageUrl)，因此不会发生cors错误。但默认加载程序不适用于next export。所以我不得不使用akamai加载程序而不是默认加载程序。对于使用akamai加载程序，现在使用imgUrl直接调用图像(https://example.com/slider.jpg)。我尝试了多种解决方案，但都解决不了这个问题。CORS错误-
Access to image at 'https://someCDNurl/promotion/ac-1.JPG' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
最后，我尝试添加自定义响应头Access-Control-Allow-Origin: *。但是我想这个头可以从页面中获取资源。但我不知道如何为浏览器获取的特定url(如https://example.com/(设置标题。有人能告诉我如何添加一个自定义的头来从特定的url获取资源或任何其他方式/破解来解决这个问题吗？我使用的是nextjs版本11。我的next.config.js:
/* const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
}) */
module.exports = ({
async headers() {
return [
{
source: '/(.*)',
headers: [
{
key: 'Access-Control-Allow-Origin',
value:
'*',
},
],
},
]
},
devIndicators: {
autoPrerender: false,
},
images: {
domains: ['example1.com', 'example2.com'],
loader: 'akamai',
path: '',
disableStaticImages: false,
minimumCacheTTL: 60,
formats: ['image/webp'],
},
reactStrictMode: true,
env: {
PG_PUBLIC_KEY: process.env.PG_PUBLIC_KEY,
PRIVATE_KEY : process.env.PRIVATE_KEY,
MERCHANT_ID : process.env.MERCHANT_ID,
NAGAD_BASE_URL : process.env.NAGAD_BASE_URL,
MERCHANT_NUMBER : process.env.MERCHANT_NUMBER,
MERCHANT_CALLBACK_URL: process.env.MERCHANT_CALLBACK_URL,
},
});
我的前端图像组件：
import Image from 'next/image';
<Image
unoptimized={true}
//loader={myLoader}
// src={item.imgUrl}
crossOrigin="anonymous"
src={getImgUrl(item.imgUrl)}
height={200}
width={410}
layout="responsive"
objectFit="cover"
alt="banner"
/>
添加domains参数哪个图像出现在next.config.js:中
module.exports = {
images: {
domains: ["example.com"],
},
};