Gatsby develop模式无法调用Azure SQL Database REST API的问题

问题本质 #

部署到Azure Static Web App(SWA)正常，但本地gatsby develop模式报错，核心原因是Azure SQL的REST API未配置允许http://localhost:8000跨域访问——SWA与API属于可信域名范围所以能正常请求，而本地开发域名不在API的CORS白名单里。

添加no-cors模式无效的原因是：该模式下浏览器会返回无法读取内容的"不透明响应"，根本拿不到你需要的数据，等于请求白发起。

可行解决方案 #

1. 配置API的CORS规则（永久解决） #

登录Azure门户，找到对应Azure SQL REST API的服务资源，在CORS设置中添加http://localhost:8000到允许的源列表，同时确保开启GET方法的允许权限，并配置响应头包含Access-Control-Allow-Origin。

2. 用Gatsby代理转发请求（本地开发推荐） #

在项目根目录的gatsby-config.js中添加代理配置：

module.exports = {
  developMiddleware: app => {
    app.use('/data-api', require('http-proxy-middleware')({
      target: 'https://example.com',
      changeOrigin: true,
    }));
  },
};

之后把你的请求修改为：

fetch('/data-api/rest/blogs')

本地开发时，Gatsby会自动将请求转发到目标API，绕过浏览器的CORS限制。

3. 临时禁用浏览器CORS（仅测试用） #

安装浏览器CORS禁用插件（如CORS Unblock）临时绕过限制，但不推荐长期使用，生产环境必须依赖正规的CORS配置。

内容的提问来源于stack exchange，提问作者user23348508