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

Question

我正在尝试单水疗中心并遇到以下问题

我在端口 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()
   })
})

Answer 1

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

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")