Netlify部署后fetch短URL失效 如何携带cookie正常访问后端？

package.json 中的 proxy 字段是 React 本地开发服务器专属的配置，仅在本地执行 npm start 启动开发服务时生效，部署到 Netlify 等生产环境后，该配置不会被打包进产物，自然无法生效，所以原有短路径请求会404。

有两种可选方案，你可以根据项目情况选择：

• 方案1：全局替换所有短请求路径为完整后端URL，适合接口数量较少的项目
• 方案2：配置 Netlify 代理规则，无需修改业务代码：在项目 public 目录下新建名为 _redirects 的文件，写入以下内容即可，原有短路径写法完全不用调整：

/*  https://social-firegram.herokuapp.com/api/:splat  200

原生 fetch 默认不会在跨域请求中携带 cookie，这就是你本地用完整URL请求返回401的原因，只要在 fetch 配置中添加 credentials: 'include' 即可：

fetch('https://social-firegram.herokuapp.com/api/posts/dp/upload', {
    method: 'POST',
    body: formData,
    credentials: 'include' // 跨域请求自动携带同源cookie
})

注意需要后端同步配置CORS规则：

• Access-Control-Allow-Credentials 设为 true
• Access-Control-Allow-Origin 不能使用通配符 *，必须明确允许你的本地开发域名（比如http://localhost:3000）和 Netlify 线上域名

如果你选择了上述 Netlify 代理规则的方案，前端请求属于同域请求，不需要额外加 credentials 配置即可自动携带cookie。

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