首页 > 其他分享 >nextjs 客户端图片 因跨域 strict-origin-when-cross-origin 无法展示

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

时间:2024-08-22 16:28:57浏览次数:7  
标签:origin 匹配 跨域 路径 when next remotePatterns js

使用 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 来处理图片加载逻辑。
Image

标签:origin,匹配,跨域,路径,when,next,remotePatterns,js
From: https://www.cnblogs.com/ministep/p/18374141

相关文章

  • vue3解决跨域问题
     vue3登录提示错误 解决方法1,修改根目录下vite.config.ts文件 修改host、proxy、target,修改后文件如下(红色为修改),具体内容根据后台实际修改 server:{ host:'localhost', port:env.VITE_PORTasunknownasnumber, open:JSON.parse(env.VITE_OPEN),......
  • Origin绘制投影能带气泡图
    http://【Origin教程(5)——以投影能带为例绘制气泡图】https://www.bilibili.com/video/BV1bY4y1H7cS?vd_source=ef6b729b4f55ce688e98f754cad88d00本文参考上述B站视频,建议先看视频再看笔记,综合看容易看懂。前提:vasp计算能带时INCAR中要设置LORBIT=11用vaspkit导出每种元素......
  • 跨域、JSONP、CORS、Spring、Spring Security解决方案
    概述JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。跨域是浏览器(如Chrome浏览器基于JSV8引擎,可以简单理解为JS解释器)的一种同源安全策略,是浏览器单方面限制脚本的跨域访问。因此,仅有客户端运行在浏览器时才存在跨域问题,才需要考虑如何解决这个问题。浏览器控制台......
  • Origin2024如何制作双Y轴图?
    日常科研中,我们经常会用到x-y轴图,但有时候一个x对应两个y值甚至多个y值,那应该怎么做呢?下面给大家分享绘制双Y轴图的操作方法;操作步骤:1、先打开Origin2024软件,然后在Book1中输入如下示例数据: 2、选中所有数据:3、点击菜单栏中【绘图】→【多面板/多轴】→【双Y轴点线柱状......
  • nginx 配置允许跨域
    当前端页面和后端应用的协议、IP、端口有任意一项不一样时,就会出现跨域问题,对于这种情况我们可以在后端应用前加一个nginx ,在server{location/{…}}中配置可以跨域完整配置文件如下:worker_processes1;events{worker_connections1024;}http{include......
  • 内网安全:跨域攻击
    目录获取域信息利用域信任密钥获取目标域利用krbtgt哈希值获取目标域获取域信息在域中,EnterpriseAdmins组(出现在林中的根域中)的成员具有对目录林中所有域的完全控制权限。在默认情况下,该组包含林中所有域控制器上具有Administrators权限的成员查看当前域中计算机的......
  • Spring Boot 中如何解决跨域问题
    SpringBoot中跨域问题是什么   在SpringBoot中,跨域问题是指在浏览器上发送跨源请求时可能会遇到的问题。跨源请求是指通过浏览器发送请求到不同域的服务器。同源策略是浏览器的一种安全机制,限制了跨域请求的行为。如果请求的域与当前页面的域不同,浏览器会阻止请求的发......
  • 同源政策的安全性对比与跨域现象的产生
    同源政策保证了浏览器的安全性的同时,也导致了跨域的产生同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。同源:协议、域名、接口同时相同同源政策的作用:限制了当前域......
  • Spring Boot中的跨域资源共享(CORS)处理
    SpringBoot中的跨域资源共享(CORS)处理大家好,我是微赚淘客返利系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!在Web应用开发中,跨域资源共享(CORS)是一个常见的问题。当一个Web应用需要与另一个域下的Web服务进行交互时,浏览器出于安全考虑,会默认阻止这种跨域请求。SpringBoot......
  • axios访问后端,及后端返回前端报错跨域问题
    packagecom.example.demo.test.config;importorg.springframework.util.StringUtils;importjavax.servlet.*;importjavax.servlet.annotation.WebFilter;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjav......