如何修复 DOMException：无法在 'XMLHttpRequest' 上执行 'open'：无效 URL MERN 堆栈

Question

您好，我在 Heroku 上部署我的应用程序后遇到了这个错误。前端渲染得很好，但我认为我的后端有问题。

DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL at https://recit-note-app.herokuapp.com/static/js/2.b7aa495c.chunk.js:2:87478 at new Promise () at e.exports (https://recit-note-app.herokuapp.com/static/js/2.b7aa495c.chunk.js:2:87186) at e.exports (https://recit-note-app.herokuapp.com/static/js/2.b7aa495c.chunk.js:2:249521)

这是我的 Axios 实例：

const instance = axios.create({
baseURL: `https://recit-note-app.herokuapp.com:${process.env.PORT}/api/`,
timeout: 5000,
headers: {
  "Content-Type": "application/json",
  accept: "application/json",
},
});

还有我的一位处理程序来获取用户数据：

try {
const response = await instance.get(`user`, {
  headers: {
    "x-access-token": token,
  },
});
const data = await response;
JSON.stringify("data");
return data;
} catch (error) {
  console.error(error);
  return error.response;
}

我不知道是什么原因导致的错误。你们知道如何解决这样的错误吗？谢谢。

Answer 1

我解决了这个问题。原来我不需要设置端口来调用API，只需要url。所以我只是将 url 更改为没有端口的网络 :).

baseURL: `https://recit-note-app.herokuapp.com/api/`

我也遇到了 CORS 问题，所以我将 url 添加到 CORS Origin。参考：https://www.npmjs.com/package/cors#configuration-options

const corsOptions = {
  origin: ["http://localhost:3000", "https://recit-note-app.herokuapp.com/"],
};

如何修复 DOMException：无法在 'XMLHttpRequest' 上执行 'open'：无效 URL MERN 堆栈

How to fix DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL MERN Stack

javascript

mongodb

express

reactjs

mern