Beacon API & Fetch API & CORS error & Preflight 403

Beacon API & Fetch API & CORS error & Preflight 403 预检请求 OPTIONS

Beacon API & Fetch API & CORS error & Preflight 403

​

demo

localhost/:1 Access to resource at '​???' from origin ' 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 请求