2022年10月

前端在调用别人 api 时经常遇到跨域或者 https 无法调用 http 的问题,通过反代即可解决
deno.com 提供免费的 NodeJS 环境,在其官网后台新建应用,在 playground 粘贴代码:

import { serve } from "https://deno.land/[email protected]/http/server.ts"
serve(async (req: Request) => {
  const url = new URL(req.url)
  const targetUrl = url.href.replace(`${url.origin}/`, '')
  let urlObj: any
  try {
    urlObj = new URL(targetUrl)
  } catch (e) {
    console.error(e.message)
  }
  if (['http:', 'https:'].indexOf(urlObj?.protocol) > -1) {
    let res = await fetch(targetUrl, {
      headers: req.headers,
      method: req.method,
      body: req.body,
    })
    let headers = {}
    res.headers.forEach((value, key) => {
      headers[key] = value
    })
    if ('*' !== headers['Access-Control-Allow-Origin']?.trim()
      && '*' !== headers['access-control-allow-origin']?.trim()) {
      headers['Access-Control-Allow-Origin'] = '*'
    }
    return new Response(res.body, { headers, status: res.status })
  }
  return new Response(
    `Usage: ${url.origin}/https://deno.com/deploy/docs/pricing-and-limits`)
})

优势:跟cloudflare worker相比,这个支持带端口的url

  1. install packages

    yarn add mobx mobx-react-lite
  2. in ./tsconfig.json

    1. set compilerOptions.experimentalDecorators = true
    2. sometimes you need to close project and reopenit, otherwise, it might keep waring: Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)
  3. create file src/stores/CounterStore.ts

    import { action, makeObservable, observable } from "mobx";
    
    export class CounterStore {
      constructor() {
        makeObservable(this)
      }
      @observable
      value: number = 0;
    
      @action
      increment() {
        this.value += 1;
      }
    
      @action
      decrement() {
        this.value -= 1;
      }
    }
  4. create file src/stores/index.ts

    import React from "react";
    import { CounterStore } from "./CounterStore"
    
    export const stores = Object.freeze({
      counterStore: new CounterStore()
    })
    
    export const storesContext = React.createContext(stores);
    export const StoresProvider = storesContext.Provider;
  5. create file src/stores/hooks.ts

    import React from 'react'
    import { stores, storesContext } from "./";
    
    export const useStores = () => React.useContext(storesContext);
    
    export const useStore = <T extends keyof typeof stores>(
      store: T
    ): typeof stores[T] => React.useContext(storesContext)[store];
  6. in pages

    import { useEffect } from "react"
    import { useStore } from "../../stores/hooks"
    import { observer } from "mobx-react-lite"
    
    const MyPage = observer(() => {
      const counterStore = useStore('counterStore')
      useEffect(()=>{
        console.log(counterStore?.value)
      }, [counterStore?.value])
      return (
        <div>
          <p><button onClick={()=>counterStore.increment()}>increment</button></p>
          <p><button onClick={()=>counterStore.decrement()}>decrement</button></p>
        </div>
      )
    })
    export default MyPage

    reference: javascript.plainenglish.io/all-you-need-is-mobx-react-lite-47ba0e95e9c8

在oracle服务器上运行:

curl http://169.254.169.254/opc/v1/instance/definedTags/

返回示例:

{
  "Oracle-Tags": {
    "CreatedBy": "default/[email protected]",
    "CreatedOn": "2022-07-31T07:51:25.197Z"
  }
}

CreatedBy字段就是你的oracle账号
官方出处:docs.oracle.com/en-us/iaas/Content/Compute/Tasks/gettingmetadata.htm