3
Nextjs 如何访问后端服务的 API 以及如何跨域？
source link: https://www.v2ex.com/t/937008
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React 新手，在学习 Next ，请教大家两个问题。
1.Next 如何访问后端服务的 API ？ 第一种是直接访问后端 API 。 另一种是访问 Next API Router ，API Router 中再访问后端 API 。 请问最佳实践是那种？
2.Next 如何跨域？
看文章都是通过 API Router ？
还有通过 next.config.js；
async rewrites() {
return [
{source: '/apis/:path*', destination: 'http://127.0.0.1:80/:path*'}
]
}
但是这样的话，GET 请求正常，POST 请求提示超时。请问如何解决？
7 条回复 • 2023-05-03 21:00:49 +08:00
 |
dayeye2006199 6 小时 15 分钟前 > 1.Next 如何访问后端服务的 API ？ 第一种是直接访问后端 API 。 另一种是访问 Next API Router ，API Router 中再访问后端 API 。 请问最佳实践是那种？
你如果只做 CSR ，普通 react 里面怎么访问的就怎么访问（例如写在 useEffect 里面的 fetch ）。 你做 SSG 或者 SSR ，那就写在 getStaticProps 或者 getServerSideProps 里面。 api route 你看作一个普通的后端就可以了。如果 api route 单纯做一个转发，没必要通过这个额外的一层。除非你在里面还有一些别的逻辑（例如数据变换，动态修改头文件之类的）。 > 2.Next 如何跨域？ 跨域是后端的事情。你需要后端给你的 response 头里面，包含允许跨域的信息。这个和前端没有太大的关系。 你给的那个例子是一个转发的例子，就是让客户端觉得自己在访问 /apis/* 这个路径，实际通过 API routes 转发到其他的地址，来达到欺骗客户端的作用。 |
 |
rocmax 4 小时 22 分钟前 via Android 能在服务端获取数据的尽量服务端渲染后发给客户端。需要响应用户操作获取数据的访问 API
|
 |
vczyh 3 小时 44 分钟前 via iPhone @dayeye2006199 谢谢大佬的耐心解答，我之前习惯用 Vue 的 dev server 跨域了。后端不适配的话，我本地起一个 server 代理一下吧。
|
 |
amlee 3 小时 43 分钟前 能直接访问就直接访问呀。
访问 api router 是因为服务端没有跨域支持，然后用 nextjs 的 api 对服务端做一个反代，这样就避免跨域了。 至于 op 说的的 post 超时，这描述太模糊了吧。请求有没有到达后端？后端的路径上有没有处理 post ？ |
 |
um1ng 34 分钟前 写一个 server 服务，服务调服务，就不会跨域了，会用到这个
``` import { createProxyMiddleware } from 'http-proxy-middleware' ``` |
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK