fix: 解决跨域问题

.umirc.ts

@@ -15,9 +15,9 @@ export default defineConfig({
   // publicPath:'/',
   proxy:{
     '/api': {
-      'target': 'https://rpc-dashboard.ywtinfo.com/api/',
+      'target': 'https://rpc-dashboard.ywtinfo.com',
       'changeOrigin': true,
-      'pathRewrite': { '^/api' : '' },
+      'pathRewrite': { '^/' : '' },
     },
   },
 });

src/api/api.tsx

@@ -1,18 +1,24 @@
 import HttpRequest from './index'
 
-const url = 'https://rpc-dashboard.ywtinfo.com/api'
 export default {
-    testApi: ():Promise<any> => HttpRequest({
-        url: url + '/getenvs',
+  getenvsApi: ():Promise<any> => HttpRequest({
+        url: '/api/getenvs',
         method: 'get',
-        params: {
-        }
     }),
 
-    restlist: ():Promise<any> => HttpRequest({
-      url: url + '/restlist',
+    getGrpclist: (env: string):Promise<any> => HttpRequest({
+      url:  '/api/grpclist',
       method: 'get',
       params: {
+        env
+      }
+  }),
+
+    restlist: (env: string):Promise<any> => HttpRequest({
+      url:  '/api/restlist',
+      method: 'get',
+      params: {
+        env
       }
     })
 }

src/api/index.ts

@@ -19,35 +19,32 @@ const HttpRequest = ({url, method, params}: Config) => {
         data: (method == 'POST' || method == 'post') ? params : '', // 如果是post请求使用 data
         timeout: 5000,
         headers: {
-            'Content-Type': 'text/plain',
-            "Access-Control-Allow-Origin":"*"
+            'Content-Type': 'application/json; charset=utf-8',
+            "Accept":"*/*"
         },
         prefix: '',
         suffix: '',
-        errorHandler: function (error:any) {
+        errorHandler: (error:any) => {
             if (error.response) {
-              console.log(error.response.status);
-              console.log(error.response.headers);
-              console.log(error.data);
-              console.log(error.request);
+              console.log('error.response',error)
             } else {
-              console.log(error.message);
+              console.log('error.message',error.message)
             }
             throw error;
         },
     }
-    const request = extend(config)
+    const request = extend({...config, responseType:'json'})
 
-    
     request.interceptors.request.use((request,options) =>{
-      console.log('request ===>',request)
-      return {url,options}
+      return {url, options: { ...options, interceptors: true, }}
     })
     
-    request.interceptors.response.use((response)=>{
-      console.log('response ==>',response)
-      return response
-    },{})
+    request.interceptors.response.use( (response)=>{
+      console.log('response ==>', response.clone().json())
+      // const data = await response.clone().body && response.clone().body().arrayBuffer()
+      // console.log('data ===>',data)
+      return response.clone()
+    })
     
     return request(url)
 }

src/pages/home.tsx

@@ -6,79 +6,43 @@ import { useMount } from 'ahooks'
 import api from '../api/api'
 import { useEffect, useState } from 'react';
 import timestampToTime from '@/utils';
+import { useLocation } from 'umi';
 const { TabPane } = Tabs;
 const { SubMenu } = Menu;
 const { Column, ColumnGroup } = Table;
 const { Header, Content, Sider } = Layout;
 type Detail = {
-  Detail:string
-  Env:string
-  Host:string
-  Port:number
-  ServiceName:string
-  UpTime:number
-  Version?:string
+  Detail: string
+  Env: string
+  Host: string
+  Port: number
+  ServiceName: string
+  UpTime: number
+  Version?: string
 }
 const data: Detail[] = [
-  {
-    Detail: "",
-    Env: "qa",
-    Host: "127.0.0.1",
-    Port: 6910,
-    ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
-    UpTime: 1649995051,
-    Version: "",
-  },{
-    Detail: "",
-    Env: "qa",
-    Host: "127.0.0.1",
-    Port: 6910,
-    ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
-    UpTime: 1649995051,
-    Version: ""
-  },{
-    Detail: "",
-    Env: "qa",
-    Host: "127.0.0.1",
-    Port: 6910,
-    ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
-    UpTime: 1649995051,
-    Version: ""
-  },
-];
-const data2: Detail[] = data.map(item => {return {...item,Env:'dev'}})
-const data3: Detail[] = data.map(item => {return {...item,Env:'qa1'}})
-const data4: Detail[] = data.map(item => {return {...item,Env:'prod'}})
-const tabsList = [
-  {
-    name: 'qa',
-    key: 'qa',
-    list: data
-  },
-  {
-    name: 'dev',
-    key: 'dev',
-    list: data2
-  },
-  {
-    name: 'qa1',
-    key: 'qa1',
-    list: data3
-  },
-  {
-    name: 'prod',
-    key: 'prod',
-    list: data4
-  }
+  // {
+  //   Detail: "",
+  //   Env: "qa",
+  //   Host: "127.0.0.1",
+  //   Port: 6910,
+  //   ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
+  //   UpTime: 1649995051,
+  //   Version: "",
+  // }
 ];
+const data2: Detail[] = data.map(item => { return { ...item, Env: 'dev' } })
+const data3: Detail[] = data.map(item => { return { ...item, Env: 'qa1' } })
+const data4: Detail[] = data.map(item => { return { ...item, Env: 'prod' } })
 export default function IndexPage() {
-  const [key,setKey] = useState('qa')
-  const [list,setList] = useState(data)
-  const [label,setLabel] = useUrlState({ count: tabsList[0].name })
-  useMount(()=>{
-      setLabel({ count: label.count ? label.count : tabsList[0].name })
-      setKey(label.count ? label.count : tabsList[0].key)
+  const [key, setKey] = useState('qa')
+  const [list, setList] = useState(data)
+  const [tabsList, setTabsList] = useState([])
+  const [label, setLabel] = useUrlState({ env: '' })
+  useMount(() => {
+    initData()
   })
+  const location = useLocation();
   const columns = [
     {
       title: '服务名称',
@@ -99,26 +63,34 @@ export default function IndexPage() {
     {
       title: '上线时间',
       dataIndex: 'UpTime',
-      render: (text:number) => <a>{timestampToTime(text)}</a>
+      render: (text: number) => <a>{timestampToTime(text)}</a>
     },
     {
       title: '备注',
       dataIndex: 'Detail',
     },
   ];
-  
-  useEffect(() => {
-    api.restlist().then((res) => {
-      console.log(res);
-    })
-  })
 
-  const tabChange = (index:string) => {
+  const initData = async () => {
+    const tabs = await api.getenvsApi()
+    console.log('tabstabstabstabsz',tabs)
+    const env = location.search.slice(5)
+    console.log('env',env)
+    const restList = await api.restlist(env ? env : tabs[0])
+    setTabsList(tabs)
+    setList(restList)
+    setLabel({ env: env ? env : '' })
+    setKey(env ? env : tabs[0])
+  }
+
+
+  const tabChange = async (index: string) => {
     setKey(index)
-    const instance = tabsList.find(item=>item.key === index)
-    if(instance){
-      setList(instance.list)
-      setLabel({ count: instance.name})
+    const instance = tabsList.find(item => item === index)
+    if (instance) {
+      const restList = await api.restlist(instance)
+      setList(restList)
+      setLabel({ env: instance })
     }
   }
 
@@ -129,8 +101,8 @@ export default function IndexPage() {
         <Tabs defaultActiveKey={key} activeKey={key} onChange={tabChange}>
           {tabsList.map((item) => {
             return (
-              <TabPane tab={item.name} key={item.key} >
-                
+              <TabPane tab={item} key={item} >
+
               </TabPane>
             )
           })}
@@ -139,6 +111,7 @@ export default function IndexPage() {
           columns={columns}
           dataSource={list}
           key="tablekey11"
+          pagination={{pageSize: 100}}
         >
         </Table>
       </div>

src/pages/index.tsx

@@ -6,79 +6,45 @@ import { useMount } from 'ahooks'
 import api from '../api/api'
 import { useEffect, useState } from 'react';
 import timestampToTime from '@/utils';
+import { useHistory, useLocation, useParams, useRouteMatch, withRouter } from 'umi';
 const { TabPane } = Tabs;
 const { SubMenu } = Menu;
 const { Column, ColumnGroup } = Table;
 const { Header, Content, Sider } = Layout;
 type Detail = {
-  Detail:string
-  Env:string
-  Host:string
-  Port:number
-  ServiceName:string
-  UpTime:number
-  Version?:string
+  Detail: string
+  Env: string
+  Host: string
+  Port: number
+  ServiceName: string
+  UpTime: number
+  Version?: string
 }
 const data: Detail[] = [
-  {
-    Detail: "",
-    Env: "qa",
-    Host: "127.0.0.1",
-    Port: 6910,
-    ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
-    UpTime: 1649995051,
-    Version: "",
-  },{
-    Detail: "",
-    Env: "qa",
-    Host: "127.0.0.1",
-    Port: 6910,
-    ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
-    UpTime: 1649995051,
-    Version: ""
-  },{
-    Detail: "",
-    Env: "qa",
-    Host: "127.0.0.1",
-    Port: 6910,
-    ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
-    UpTime: 1649995051,
-    Version: ""
-  },
-];
-const data2: Detail[] = data.map(item => {return {...item,Env:'dev'}})
-const data3: Detail[] = data.map(item => {return {...item,Env:'qa1'}})
-const data4: Detail[] = data.map(item => {return {...item,Env:'prod'}})
-const tabsList = [
-  {
-    name: 'qa',
-    key: 'qa',
-    list: data
-  },
-  {
-    name: 'dev',
-    key: 'dev',
-    list: data2
-  },
-  {
-    name: 'qa1',
-    key: 'qa1',
-    list: data3
-  },
-  {
-    name: 'prod',
-    key: 'prod',
-    list: data4
-  }
+  // {
+  //   Detail: "",
+  //   Env: "qa",
+  //   Host: "127.0.0.1",
+  //   Port: 6910,
+  //   ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
+  //   UpTime: 1649995051,
+  //   Version: "",
+  // },
 ];
+const data2: Detail[] = data.map(item => { return { ...item, Env: 'dev' } })
+const data3: Detail[] = data.map(item => { return { ...item, Env: 'qa1' } })
+const data4: Detail[] = data.map(item => { return { ...item, Env: 'prod' } })
 export default function IndexPage() {
-  const [key,setKey] = useState('qa')
-  const [list,setList] = useState(data)
-  const [label,setLabel] = useUrlState({ count: tabsList[0].name })
-  useMount(()=>{
-      setLabel({ count: label.count ? label.count : tabsList[0].name })
-      setKey(label.count ? label.count : tabsList[0].key)
+  const [key, setKey] = useState('qa')
+  const [list, setList] = useState(data)
+  const [tabsList, setTabsList] = useState([])
+  const [label, setLabel] = useUrlState()
+  useMount(() => {
+    initData()
   })
+  const params = useRouteMatch();
+  const location = useLocation();
+
   const columns = [
     {
       title: '服务名称',
@@ -99,26 +65,33 @@ export default function IndexPage() {
     {
       title: '上线时间',
       dataIndex: 'UpTime',
-      render: (text:number) => <a>{timestampToTime(text)}</a>
+      render: (text: number) => <a>{timestampToTime(text)}</a>
     },
     {
       title: '备注',
       dataIndex: 'Detail',
     },
   ];
-  
-  useEffect(() => {
-    api.testApi().then((res) => {
-      console.log(res);
-    })
-  })
 
-  const tabChange = (index:string) => {
+
+  const initData = async () => {
+    const tabs = await api.getenvsApi()
+    const env = location.search.slice(5)
+    const grpcList = await api.getGrpclist(env ? env : tabs[0])
+    setTabsList(tabs)
+    setList(grpcList)
+    env && setLabel({ env })
+    setKey(env ? env : tabs[0])
+  }
+
+
+  const tabChange = async (index: string) => {
     setKey(index)
-    const instance = tabsList.find(item=>item.key === index)
-    if(instance){
-      setList(instance.list)
-      setLabel({ count: instance.name})
+    const instance = tabsList.find(item => item === index)
+    if (instance) {
+      const grpcList = await api.getGrpclist(instance)
+      setList(grpcList)
+      setLabel({ env: instance })
     }
   }
 
@@ -129,8 +102,8 @@ export default function IndexPage() {
         <Tabs defaultActiveKey={key} activeKey={key} onChange={tabChange}>
           {tabsList.map((item) => {
             return (
-              <TabPane tab={item.name} key={item.key} >
-                
+              <TabPane tab={item} key={item} >
+
               </TabPane>
             )
           })}
@@ -139,6 +112,7 @@ export default function IndexPage() {
           columns={columns}
           dataSource={list}
           key="tablekey11"
+          pagination={{pageSize: 100}}
         >
         </Table>
       </div>