边写边查，学到了不少东西

关于检测是否有该值

后端传递的数据，不一定会有这个字段的写入的情况下，如果不进行判断将会报错

if(typeof(item.name) != "undefined" ){

如何允许换行

style = {{marginTop: 16}}

如何查找替换

a=a.replaceAll('b','c');

拆分文件

如同正常import一样引用，在对应文件中设置 export default 即可

关于部署发布

我自然是会把东西丢在集群上的，首先我们进行构建

npm run build

这样会在目录中生成dist文件夹，这就是可以直接发布的了

当然本地是不能直接打开的，我们之间原地创建一个dockerfile，基于nginx镜像：

FROM nginx:1.23
COPY dist /usr/share/nginx/html

这样就能运行了，直接按照正常步骤发布即可

关于后端代理

发布后的网页是https的，但是后端是http，fetch无法降级

但我们此时已经有nginx了，其实相对来说是比较方便的

添加行：

COPY default.conf /etc/nginx/conf.d/default.conf

添加文件 default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  url;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    location /lacate/ {
        proxy_pass http://url/lacate/;
        proxy_set_header Content-type application/json;
        add_header Access-Control-Allow-Origin *;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

将locate 替换为想要的路径，将proxy_pass后内容替换为后端url即可

如何在调试的时候或得这些代理呢

我们的架构 npm run dev 使用的是vite

在vite的server中添加proxy

'/locate':{
        target: 'http://url',
        changeOrigin: true,
      }

如何获取请求头内容

当我翻阅了大量的google之后发现，前端是没有什么办法获得请求头内容的

但是有些特殊需求，例如从网关给你发送的一些用户信息，走的请求头，这时候如何交给前端处理

假设这个头部为xxxname，我们可以通过nginx 转发到响应头

add_header  xxxname  $http_xxxname;

然后通过如下函数来获取响应头内容

  function getxxxname(){
    let req = new XMLHttpRequest();
    req.open('GET', document.location.href, false);
    req.send(null);
    let headers = req.getResponseHeader("xxxname");
    return headers;
  }