调用Attentive Mobile订阅接口触发CORS策略拦截报错如何解决

从源'http://localhost:3000'发起的对'https://api.attentivemobile.com/v1/subscriptions'的fetch请求已被CORS策略阻止：预检请求响应未通过访问控制检查，被请求资源不存在'Access-Control-Allow-Origin'响应头。

你当前的请求触发预检请求的原因是：

• 请求方法是POST，且携带了Content-Type: application/json、Authorization两个自定义请求头，不属于简单请求范畴，浏览器会自动先发送OPTIONS预检请求校验跨域权限
• 目标API服务端未配置允许http://localhost:3000的跨域访问，因此预检请求未通过，被浏览器拦截

1. 本地开发阶段：配置开发代理（最快生效） #

不管你用的是React/Vue/Vite等任何前端构建工具，都可以配置本地开发代理转发请求：
以create-react-app为例，直接在项目根目录的package.json中添加配置：

"proxy": "https://api.attentivemobile.com"

修改你的请求代码，把请求域名去掉，改为请求相对路径：

async function smsSubscription() {
  const subscribe = await fetch('/v1/subscriptions', {
    method: 'post',
    body: JSON.stringify({
            "user": {
              "phone": '(502)276-8568',
              "email": 'any@any.com'
            },
            "signUpSourceId": "2323"
          }),
    headers: {
      'Content-Type': 'application/json',
      'Authorization': '[hidden]'
    }
 });
}

本地开发服务器会自动把路径匹配的请求转发到目标API域名，浏览器视为同域请求，不会触发CORS校验。如果是其他构建工具，对应修改devServer/proxy配置即可，逻辑一致。

2. 生产环境推荐：后端中转接口 #

不要直接在前端调用第三方API，会存在Authorization密钥泄露的风险，更稳妥的方案是：

• 前端请求你自己的后端同域接口
• 你的后端服务接收参数后，再向attentivemobile的API发起请求
• 后端请求不存在跨域限制，同时敏感密钥可以保存在服务端，避免泄露

3. 不推荐方案：no-cors模式 #

不要使用提示里的mode: 'no-cors'配置，该模式下你无法获取接口响应内容，也无法发送自定义请求头，请求无法正常生效。

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