Chrome 拓展开发 Service Worker 无法使用 XMLHttpRequest 发送 HTTP 请求

186 字

1 分钟

Chrome 拓展开发 Service Worker 无法使用 XMLHttpRequest 发送 HTTP 请求

2022-10-15

Web

chrome

/

http

/

javascript

相关的报错信息: XMLHttpRequest is not defined at chrome-extension:

原因#

显然, Service Worker 不支持 XMLHttpRequest

解决方案#

用 fetch

相关资料#

通过 fetch 上传 JSON 数据

1
const data = { username: 'example' };    // 定义数据
2

3
fetch('https://example.com/profile', {
4
  method: 'POST', // or 'PUT'            // 指定请求方法
5
  headers: {
6
    'Content-Type': 'application/json',  // 指定内容类型
7
  },
8
  body: JSON.stringify(data),            // 传入内容
9
})
10
  .then((response) => response.json())   // 取响应 json
11
  .then((data) => {                      // 对解析完成的 json 进行操作
12
    console.log('Success:', data);
13
  })
14
  .catch((error) => {                    // 捕捉错误
15
    console.error('Error:', error);
16
  });

或者最简单的, 仅仅上传, 不考虑响应与异常情况

1
const data = { username: 'example' };    // 定义数据
2

3
fetch('https://example.com/profile', {
4
  method: 'POST', // or 'PUT'            // 指定请求方法
5
  headers: {
6
    'Content-Type': 'application/json',  // 指定内容类型
7
  },
8
  body: JSON.stringify(data),            // 传入内容
9
});