single-spa axios 调用重定向到 single-spa 端口答案

【问题标题】：single-spa axios calls redirecting to single-spa portsingle-spa axios 调用重定向到 single-spa 端口
【发布时间】：2021-07-04 14:38:53
【问题描述】：

我正在尝试单水疗，但遇到以下问题

我在端口 5000 上运行单个水疗中心，在端口 8081 和 8082 上运行 2 个应用程序。这些应用程序已经在运行转换为单一水疗中心的应用程序。这些应用程序通过 axios 调用从服务器获取数据。迁移后，Axios 调用使用 URL http://localhost:5000/json/xxx.json 应该是 http://localhost:8081/json/xxx.json

如何解决这个问题？如何确保每个应用程序调用自己的后端而不是单个 spa？

axios 调用示例

return new Promise((resolve, reject) => {
   axios.get('/json/xx.json', {
   responseType: 'json'
   })
   .then((response) => {
   resolve(response.data)
   })
   .catch(reject)
   .finally(() => {
     doSomething()
   })
})

【问题讨论】：

标签： json axios single-spa

【解决方案1】：

您可以为您的 axios url 使用环境变量，而不是使用相对路径来设置它们。

function getAxiosInstanceFor(baseURL: string):{
return axios.create({
  baseURL,
  timeout: 20000,
})

}
// App1.js
// Do same thing to get api/App2.js resource.

const APP1_BASE_URL = process.env.APP1_BASE_URL;

axiosInsance = getAxiosInstanceFor(APP1_BASE_URL );

function get(path: string){
return new Promise((resolve, reject) => {
   axiosInsance.get(`${path}`, {
   responseType: 'json'
   })
   .then((response) => {
   resolve(response.data)
   })
}
   .catch(reject)
   .finally(() => {
     doSomething()
   })
})

export const { get };

// somewhereElse.js
// call functions like so
import App1 from 'App1.js';
import App2 from 'App2.js';

App1.get("/json/xx.json")
App2.get("/json/xx.json")

【讨论】：