在云上部署角度微前端时面临的问题

如何解决在云上部署角度微前端时面临的问题

我正在尝试将我的 Angular 前端应用程序部署到 IBM 云。我有一个容器应用程序，可将其他 Angular 应用程序加载到其中。

{
    "imports": {
      "login": "https://login-app.dal1a.ciocloud.ibm.com/main-es2015.js","nav-bar": "https://navbar.dal1a.ciocloud.ibm.com/main-es2015.js","att-app": "https://att-app.dal1a.ciocloud.ibm.com/main-es2015.js","single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.5.0/system/single-spa.min.js"
    }
  }

导航栏应用它是第一个加载的。但它现在给出了以下错误。

跨源请求被阻止：同源策略不允许读取位于 https://navbar.dal1a.ciocloud.nonprod.intranet.ibm.com/main-es2015.js 的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

我使用了一个自定义的 Nginx 文件来允许标头

server {
  listen 80;
   location / {
    add_header 'Access-Control-Allow-Origin' 'https://srm-master.dal1a.ciocloud.ibm.com';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';

    if ($request_method = 'OPTIONS') {
      add_header 'Access-Control-Allow-Origin' 'https://srm-master.dal1a.ciocloud.ibm.com';
      add_header 'Access-Control-Allow-Credentials' 'true';
      add_header 'Access-Control-Allow-Headers' 'Authorization,Range';
      add_header 'Access-Control-Allow-Methods' 'GET,PATCH';
      add_header 'Access-Control-Max-Age' 1728000;
      add_header 'Content-Type' 'text/plain charset=UTF-8';
      add_header 'Content-Length' 0;
      return 204;
    }
   
  }
}

Dockerfile：

# ----- BUILD -----
# Base image used for build node js apps
FROM node:12.2.0-alpine AS build
# Set our working directory
workdir /app
# copy package manifest (we do this in order to cache dependencies)
copY ./package.json .
# Install dependencies
RUN npm i
RUN npm install -g @angular/cli@8.3.26
# copy our application files
copY . .
# Build a static version of our angular app
RUN ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path
# ----- SERVE -----
# We'll use an Nginx base to host our built static assets 
FROM Nginx

# copy our minimal custom configuration
#copY ./Nginx.conf /etc/Nginx/Nginx.conf

# copy our static assets from our build container
copY --from=build /app/dist/nav-bar /usr/share/Nginx/html

# copy our minimal custom configuration
copY ./Nginx-custom.conf /etc/Nginx/conf.d/default.conf

# support running as arbitrary user which belogs to the root group
RUN chmod g+rwx /var/cache/Nginx /var/run /var/log/Nginx

# 80 is a priviliged port
# users are not allowed to listen on priviliged ports
RUN sed -i.bak 's/listen\(.*\)80;/listen 8080;/' /etc/Nginx/conf.d/default.conf

EXPOSE 8080

# remove the user directive
# comment user directive as master process is run as user in OpenShift anyhow
RUN sed -i.bak 's/^user/#user/' /etc/Nginx/Nginx.conf

#EXPOSE 8081
CMD ["Nginx","-g","daemon off;"]