Beacon API & Fetch API & CORS error & Preflight 403

Beacon API & Fetch API & CORS error & Preflight 403

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin

demo

localhost/:1 Access to resource at 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=???' from origin 'http://localhost:3001' 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.

const wxRobot = (params = {}, desc = '') => {
  // 测试 robot
  // beacon-api-json
  const url = 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=???';
  const fetchPOST = (url, obj) => {
      return fetch(
          url,
          {
              method: 'POST',
              mode: 'no-cors',
              headers: {
                  'Content-Type': 'application/json',
              },
              body: JSON.stringify(obj),
          },
      ).then(res => res.json())
      .then(json => json)
      .catch(err => console.log('fetch error', err))
      .finally(() => {
        // this.loading = false;
      });
  };
  const obj = {
      msgtype: 'markdown',
      markdown: {
          content: `
desciption: ${desc}\n
data: ${JSON.stringify(params, null, 4)}\n
          `,
      },
  };
  // fetchPOST(url, obj);
  const options = new Blob(
      [JSON.stringify(obj)],
      {type : 'application/json'}
  );
  navigator.sendBeacon(url, options);
  // let data = new FormData();
  // // data.append(`start`, startTime);
  // // data.append(`end`, performance.now());
  // // data.append(`url`, document.URL);
  // const keys = Object.keys(obj);
  // for (const key of keys) {
  //     data.append(key, obj[key]);
  // }
  // if(desc) {
  //     data.append('desc', desc);
  // }
  // navigator.sendBeacon(url, data);
};

// wxRobot(params, desc);

预检请求 OPTIONS

简单 Fetch 请求

非简单 Fetch 请求

https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe

Beacon API & CORS OPTIONS

cors

https://stackoverflow.com/questions/44139967/sending-application-json-data-with-navigation-sendbeacon-preflight-succeedes-bu

https://requestmetrics.com/building/using-the-beacon-api

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---