单spa axios调用重定向到单spa端口

Question

我正在尝试单一spa，并被以下问题困扰。

我有一个水疗中心运行在端口5000和2个应用程序运行在端口8081和8082。这些应用程序已经在运行转换为单spa的应用程序。这些应用程序通过axios调用从服务器获取数据。迁移之后，Axios调用在本应为http://localhost:8081/json/xxx.json的位置使用http://localhost:5000/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使用环境变量，而不是使用相对路径来设置它们。

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