在 Next.js 中实现 API 跨域(CORS) 调用

原文:How to Implement CORS for API Routes in Next.js

最近,发布了一个应用:Amazing Endemic Species,可以向其他开发人员提供了一组可用于二次开发的 API。

为了进行测试 API,我在自己的网站 shenlu.me 的 "Not Found" 页面中使用这些 API。然而,当我使用这些 API 时遇到了一些错误。

问题 #1: No 'Access-Control-Allow-Origin' Header

vbscript 复制代码
Access to fetch at 'http://aes.shenlu.me/api/v1/random' from origin 'http://localhost:1200' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

目前有两种方法可以解决这个问题:

  1. 在配置文件 next.config.js 中定义 CORS 头
  2. 创建一个中间件 (middleware.ts) 来处理请求

在配置文件 next.config.js 中定义 CORS 头

我使用了这种方法,并在 Amazing Endemic Speciesnext.config.mjs 文件中进行了如下配置:

csharp 复制代码
const nextConfig = {
  async headers() {
    return [
      {
        source: "/api/v1/:slug",
        headers: [
          {
            key: "Access-Control-Allow-Origin",
            value: "*", // 设置你的来源
          },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET, POST, PUT, DELETE, OPTIONS",
          },
          {
            key: "Access-Control-Allow-Headers",
            value: "Content-Type, Authorization",
          },
        ],
      },
    ];
  },
  // 添加其他 Next.js 配置
}; 

定义中间件(middleware.ts)处理请求

第二种方法我没用,可以自己查看这个连接去配置:github.com/vercel/next...

问题 #2: next/image Un-configured Host

另一个错误是,当我直接将从 aes.shenlu.me/api/v1/rand... 获取的值 aes.shenlu.me/images/**.j... 传递给 src 时出现的。为了解决这个问题,我在 next.config.jsimages.remotePatterns 中定义了主机名 aes.shenlu.me

css 复制代码
const nextConfig = {
  // 可选地添加其他 Next.js 配置。
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "aes.shenlu.me",
        port: "",
        pathname: "/images/**",
      },
    ],
  },
};

解决这个问题后,我完成了如下的 "Not Found" 页面:

参考连接

相关推荐
光影少年10 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_11 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891113 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾15 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu17 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym22 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫23 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫27 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat28 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js