react中使用nextjs框架,前端调后端接口跨域解决方式

前端在项目目录中next.config.js文件中添加以下代码

async rewrites() {return [{source: "/api/:path*",destination: `${process.env.NEXT_PUBLIC_API_DOMAIN}/api/:path*`,basePath: false}]}

截图:

  • source: "/api/:path*": 定义了一个 URL 模式,匹配所有以 /api/ 开头的请求,并将 :path* 作为一个通配符来匹配其后的路径部分。

  • destination: "${process.env.NEXT_PUBLIC_API_DOMAIN}/api/:path*": 将匹配的请求代理到 NEXT_PUBLIC_API_DOMAIN 所定义的后端 API。process.env.NEXT_PUBLIC_API_DOMAIN 是一个环境变量,通常在 .env 文件中定义。例如,如果 NEXT_PUBLIC_API_DOMAIN (后端接口ip:端口)的值是 https://api.example.com,那么请求 http://localhost:3000/api/users 就会被代理到 https://api.example.com/api/users

  • basePath: false: 禁用 basePath,确保重写规则不受 basePath 配置的影响。

注意:不要配置axios的baseURL,让其默认是localhost:xxx地址请求接口,它会转发到${process.env.NEXT_PUBLIC_API_DOMAIN}/api/:path*地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/400844.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ 面试题常用总结 详解(满足c++ 岗位必备,不定时更新)

📚 本文主要总结了一些常见的C面试题,主要涉及到语法基础、STL标准库、内存相关、类相关和其他辅助技能,掌握这些内容,基本上就满足C的岗位技能(红色标记为重点内容),欢迎大家前来学习指正&…

【MySQL 03】库的操作 (带思维导图)

文章目录 🌈 一、创建数据库🌈 二、查看数据库🌈 三、使用数据库🌈 四、修改数据库🌈 五、删除数据库🌈 六、备份数据库🌈 七、恢复数据库🌈 八、字符集和校验规则⭐ 1. 查看系统默认…

HAProxy 效能飞跃先锋队

目录 一 负载均衡 1.1 四层负载 1.2 七层负载 1.3 四层负载和七层负载的区别 二 Haproxy简介 2.1 概念和内容 2.2 haproxy的基本配置信息 2.2.1 global 配置 2.2.2 proxies 配置 三 Haproxy的算法 3.1 静态算法 3.2 动态算法 3.3 其他算法 四 高级功能及配置 4.…

Mysql原理与调优-索引原理及使用

目录 1.绪论 2.索引原理 2.1 索引采用的数据结构 2.1.1 B树 1.什么是B树 2.B树的优缺点 2.1.2 B树 1.什么是B树 3.B树的优缺点 2.2.3 hash 2.2.4 总结 2.2 InnoDB数据存储结构(聚簇索引) 2.2.1 自底向上探寻索引 3.2.2 查询一条数据的完整流程 3.2.3 聚簇索引 2…

奥运科技观察:AI PC,如何成为当代体育精神的数字捍卫者?

作者 | 曾响铃 文 | 响铃说 数字孪生帮助体育馆建设、超高清直播……这届奥运会科技感拉满,几乎所有前沿技术都能在奥运的赛事运营中发现。 而AI大时代,AI如何帮助帮助奥运会顺利举办、如何帮助运动员拥有更好的表现,同样值得业界关注&…

haproxy最强攻略

1、负载均衡 负载均衡(Load Balance,简称 LB)是高并发、高可用系统必不可少的关键组件,目标是 尽力将网络流量平均分发到多个服务器上,以提高系统整体的响应速度和可用性。 负载均衡的主要作用如下: 高并发…

# Spring Cloud Alibaba Nacos_配置中心与服务发现(四)

Spring Cloud Alibaba Nacos_配置中心与服务发现(四) 一、Nacos 配置管理-集群部署 1、 把 nacos 应用程序包,复制3份,分别命名为 nacos1, nacos2, nacos3 分别在 conf 目录下,修改 application.properties 配置文件…

数据结构——循环队列

目录 循环队列的基本知识 循环队列的实现 定义 各个接口的实现 循环队列的基本知识 循环队列的定义 循环队列(Circular Queue)是一种使用固定大小的数组实现的队列,它将数组的首尾相连,形成环形,以充分利用空间并实…

Spring Boot的配置文件

目录 一、配置文件 1.properties为后缀的配置文件 1.1基本语法 1.2读取配置文件 1.3properties的优缺点 1.4加中文注释出现乱码 2.yml格式的配置文件 2.1基础语法 2.2读取配置文件 2.2.1对象存储到配置文件中 2.3yml的优缺点 2.4用不用加单引号或者双引号呢&#xf…

【C语言篇】编译和链接以及预处理介绍(上篇)

文章目录 前言翻译环境和运行环境翻译环境编译预处理(预编译)编译词法分析语法分析语义分析 汇编 链接 运行环境预处理(预编译)详解预定义符号#define定义常量#define定义宏带有副作用的宏参数宏替换的规则宏和函数的对比 写在最后…

opencv基础的图像操作

1.读取图像,显示图像,保存图像 #图像读取、显示与保存 import numpy as np import cv2 imgcv2.imread(./src/1.jpg) #读取 cv2.imshow("img",img) #显示 cv2.imwrite("./src/2.jpg",img) #保存 cv2.waitKey(0) #让程序进入主循环(让…

RAG系列之四:深入浅出 Embedding

在 RAG 系列之三:文本切分中介绍了如何将文本切分成更小的语义单元,接下来便是将拆分的文本块进行向量化。 什么是文本向量化? 文本向量化就是将文本数据转成数字数据,例如:将文本 It was the best of times, it was…

Android全面解析之context机制(二): 从源码角度分析context创建流程(上)

前言 这篇文章从源码角度分析context创建流程。 在上一篇Android全面解析之Context机制(一) :初识context一文中讲解了context的相关实现类。经过前面的讨论,读者对于context在心中有了一定的理解。但始终觉得少点什么:activity是什么时候被创建的&…

Python数据可视化案例——地图

目录 简单案例: 进阶案例: 继上文数据可视化案例,今天学习用pyecharts练习数据可视化案例2-构建地图。 简单案例: 首先构建一个简单的地图。 代码: import json from pyecharts.charts import MapmapMap() data[…

培训学校课程管理系统-计算机毕设Java|springboot实战项目

🍊作者:计算机毕设残哥 🍊简介:毕业后就一直专业从事计算机软件程序开发,至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长:按照需求定制化开发项目、 源…

大数据面试SQL(八):求连续段的起始位置和结束位置

文章目录 求连续段的起始位置和结束位置 一、题目 二、分析 三、SQL实战 四、样例数据参考 求连续段的起始位置和结束位置 一、题目 有一张表t2_id记录了id,id不重复,但是会存在间断,求出连续段的起始位置和结束位置。 样例数据&…

结构体structure、共用体union

目录 结构体 结构体类型的定义形式 结构体类型的大小 内存计算例子 共用体union 用共用体判断大小端 结构体和共用体对比 qsort() 结构体 结构体类型——用来描述复杂数据的一种数据类型 构造类型(用户自定义类型) struc…

CUDA+tensorflow+python+vscode在GPU下环境安装及问题汇总与解答

2024.8.14 因为要做深度学习,需要安装tensorflowgpu的环境,每次都搞不好整的很生气,本次将安装过程中参考的一些大佬的博客和安装过程中遇到的问题及解决方案总结一下,希望以后不要在这件事情上浪费时间。安装环境其实也没有想象中…

Halcon图像平滑与去噪

Halcon图像平滑与去噪 文章目录 Halcon图像平滑与去噪1. 均值滤波2. 中值滤波3. 高斯滤波5. 光照不均匀 有时拍摄的图像中会存在很多杂点和噪声,对于比较均匀的噪声,可以考虑用软件的算法进行 消除。例如,可以用图像平滑的方法进行去噪&#…

uniapp 自定义全局弹窗

自定义全局弹窗可在js和.vue文件中调用&#xff0c;unipop样式不满足&#xff0c;需自定义样式。 效果图 目录结构 index.vue <template><view class"uni-popup" v-if"isShow"><view class"uni-popup__mask uni-center ani uni-cust…