reactjs - POST https://google-translate1.p.rapidapi.com/language/translate/v2 502 (Bad Gateway) 在 React 中获取时

Question

JavaScript fetch 方法的 rapidapi google translate API 代码示例如下：

fetch("https://google-translate1.p.rapidapi.com/language/translate/v2", {
"method": "POST",
"headers": {
"x-rapidapi-host": "google-translate1.p.rapidapi.com",
"x-rapidapi-key": "MY-API-KEY",
"accept-encoding": "application/gzip",
"content-type": "application/x-www-form-urlencoded"
},
"body": {
"source": "en",
"q": "Hello, world!",
"target": "es"
}
})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err);
})

现在我复制了它，并将其用于 React 组件，如下所示：

fetch("https://google-translate1.p.rapidapi.com/language/translate/v2", {
method: "POST",
body: {
"source": "en",
"q": "Hello, world!",
"target": "es"
},
headers: {
"x-rapidapi-host": "google-translate1.p.rapidapi.com",
"x-rapidapi-key": "MY-API-KEY",
"accept-encoding": "application/gzip",
"content-type": "application/x-www-form-urlencoded"
}
})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err);
})

运行程序后，我在控制台上收到错误“POST https://google-translate1.p.rapidapi.com/language/translate/v2 502 (Bad Gateway)”！

如何与服务器建立健康的连接？

标签： reactjs

Answer 1

这段代码为我解决了同样的问题

    <script>
    const key = "your key"
      const qs = obj => {
      return new URLSearchParams(obj).toString();
      }
      const word = "Hello, world";
      const data = qs({
      q: word,
      source: "en",
      target: "es",
      })

      const options = {
      method: "POST",
      url: "https://google-translate1.p.rapidapi.com/language/translate/v2",
      headers: {
      "content-type": "application/x-www-form-urlencoded",
      "x-rapidapi-key": key,
      "x-rapidapi-host": "google-translate1.p.rapidapi.com",
      },
      data: data,
      };
      axios.request(options).then(function (response) {
      console.log(response.data);
      })
      .catch(function (error) {
      console.error(99, error);
      });
    </script>