Merge branch 'dev'

Author: lianghx-319

README-zh.md

@@ -41,6 +41,8 @@ yarn add @femessage/nuxt-micro-frontend -D
 
 [文档](https://github.com/lianghx-319/micro-nuxt/blob/master/lib/module.js)
 
+> 推荐使用 `build.devMiddleware.headers` 属性来设置开发环境资源 http header, 可以查看 Nuxt API: The build Property > [devMiddleware](https://nuxtjs.org/api/configuration-build#devmiddleware)
+
 **path**: 微前端生命周期函数定义文件，相对 rootDir 的路径
 
 **force**: 强制使用模块功能，忽略 Nuxt 版本校验

README.md

@@ -41,6 +41,8 @@ yarn add @femessage/nuxt-micro-frontend -D
 
 [Documents](https://github.com/lianghx-319/micro-nuxt/blob/master/lib/module.js)
 
+> If want to set headers recommend to set `build.devMiddleware.headers`, see Nuxt API: The build Property > [devMiddleware](https://nuxtjs.org/api/configuration-build#devmiddleware)
+
 **path**: the MFE lifecycle hook file path relative to rootDir
 
 **force**: skip version check and force to use this module

example/nuxt.config.js

@@ -3,7 +3,8 @@ const { resolve } = require('path')
 module.exports = {
   mode: 'spa',
   MFE: {
-    path: 'example/mfe.js'
+    path: 'example/mfe.js',
+    force: true
   },
   rootDir: resolve(__dirname, '..'),
   buildDir: resolve(__dirname, '.nuxt'),

lib/module.js

@@ -12,13 +12,18 @@ const checkVersion = (nuxtVersion = '', skip = false) => {
   return skip || enableVersion.includes(nuxtVersion)
 }
 
+const CORSHeaders = {
+  'Access-Control-Allow-Origin': '*'
+}
+
 /**
  * Nuxt module for micro frontend using such as single-SPA or qiankun
  *
  * @param {Object} moduleOptions
  * @param {string} [moduleOptions.path = 'mfe.js'] - the MFE lifecycle hook file path relative to rootDir
  * @param {boolean} [moduleOptions.force = false] - skip version check and force to use this module
  * @param {boolean} [moduleOptions.unique = false] - create a unique name scope under window in umd library
+ * @param {object} [moduleOptions.headers = CORSHeaders] - develop environment allow CORS for qiankun fetch resource
  */
 module.exports = function (moduleOptions) {
   const { rootDir, MFE, mode, buildDir } = this.options
@@ -31,7 +36,7 @@ module.exports = function (moduleOptions) {
 
   const usingMFE = !isEmpty(options) || MFE === true
 
-  const { path = 'mfe.js', force = false } = options
+  const { path = 'mfe.js', force = false, headers = {} } = options
 
   options.path = relativeTo(buildDir, path)
 
@@ -63,6 +68,28 @@ module.exports = function (moduleOptions) {
     options
   })
 
+  // set absolute resource for html entry to fetch sub application correctly
+  this.nuxt.hook('listen', (server, { url = '' }) => {
+    const { dev, build: { publicPath } } = this.options
+    url = url.endsWith('/') ? url.slice(0, -1) : url
+    if (dev) {
+      this.options.build.publicPath = `${url}${publicPath}`
+    }
+  })
+
+  // Access-Control-Allow-Origin for builded files
+  const devMiddlewareHeaders = this.options.build.devMiddleware.headers || {}
+  const fullHeaders = this.options.build.devMiddleware.headers = { ...CORSHeaders, ...headers, ...devMiddlewareHeaders }
+
+  // Access-Control-Allow-Origin specify for HOST:PORT/index.html
+  this.nuxt.hook('render:route', (url, result, context) => {
+    for (const header in fullHeaders) {
+      if (Object.prototype.hasOwnProperty.call(fullHeaders, header)) {
+        context.res.setHeader(header, fullHeaders[header])
+      }
+    }
+  })
+
   this.nuxt.hook('build:templates', ({ templatesFiles, templateVars, resolve }) => {
     templateVars = Object.assign(templateVars, { MFE: options })
   })