nextjs 客户端图片 因跨域 strict-origin-when-cross-origin 无法展示

使用 next.config.js 配置跨域规则

Next.js 提供了一个配置文件 next.config.js，你可以在其中配置 images 选项，以允许跨域加载图片。

在 Next.js 中，remotePatterns 配置用于定义允许加载远程图像的域名及路径。不过，remotePatterns 并不支持传统的正则表达式，而是使用类似正则表达式的通配符模式。

你可以通过 remotePatterns 配置来允许特定的域名和路径，但无法直接使用正则表达式。例如：

// next.config.js
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '.example.com', // 允许所有子域名
port: '',
pathname: '/images/', // 允许 /images 路径下的所有内容
},
{
protocol: 'https',
hostname: 'example.com',
port: '',
pathname: '/products/*/image.jpg', // 匹配类似 /products/123/image.jpg 的路径
},
],
},
};
remotePatterns 解析
protocol: 匹配 URL 的协议部分，如 https 或 http。
hostname: 匹配 URL 的主机名部分，可以使用通配符 * 和 ** 来匹配子域名。
port: 匹配 URL 的端口部分。如果不需要指定端口，可以留空。
pathname: 匹配 URL 的路径部分，支持通配符 *（匹配单个路径片段）和 **（匹配多个路径片段）。

使用 next/image

如果你使用 Next.js 的 next/image 组件，你也可以通过自定义 loader 来处理图片加载逻辑。