如何修复 DOMException：无法在"XMLHttpRequest"上执行"打开"：无效的 URL MERN 堆栈

Question

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

DOMException: Failed to execute 'open' on 'XMLHttpRequest: Invalid URL在https://recit-note-app.herokuapp.com/static/js/2.b7aa495c.chunk.js: 2:87478at new Promise ()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改成了没有端口的web:)。

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/"],
};