[Feature Request] 希望umi4.x支持devServer

[JJH0901]

Background

新项目主应用使用umi4，子应用使用umi max
开发环境中，主应用访问子应用会跨域
希望可以支持devServer，设置headers:{'Access-Control-Allow-Origin':'*'}，允许主应用跨域访问子应用

Proposal

umi4.x继续支持umi3.x中的devServer配置

[fz6m]

用 proxy 选项：

https://umijs.org/docs/guides/proxy

或者在插件里（比如 项目级插件）调用 onBeforeMiddleware ，可以拿到 express 的 app ，之后想怎么弄怎么弄：

import { IApi } from 'umi'

export default (api: IApi) => {
  api.onBeforeMiddleware(({ app }) => {
    console.log('app: ', app)
  })
}

[JJH0901]

我理解proxy是配置接口跨域的
目前是想在主应用访问子应用首页时，配置子应用允许主应用跨域访问

插件的形式希望大佬多给些提示，我应该是没get到关键点，谢谢！

[xierenyuan]

我理解现在支持跨域的 https://github.com/umijs/umi/blob/master/packages/bundler-webpack/src/server/server.ts#L38

自定义的话 可以 app.use 一个中间件达成自定义需求

import { IApi } from 'umi'

export default (api: IApi) => {
  api.onBeforeMiddleware(({ app }) => {
    app.use(helloMiddleware)
  })
}

[spencerswagger]

我也遇到了相同的问题，其他开发者启动项目并不支持跨域，目前正在定位问题。
猜测可能是由于操作系统或umi版本导致的，我本地是OS X umi@4.0.34，出现问题的大多是Windows。

[adrestios]

你好，请问你是怎么解决的，我现在本地接qiankun有碰到这个问题

[hyzx86]

同求，子应用场景

[JJH0901]

@spencerswagger @adrestios @hyzx86 非常抱歉回复晚了
我的项目子应用在主应用跑不通，是因为我把子应用的端口写错了，更正后，可以正常访问子应用（且无需设置header）
因此未深入研究umi4中header如何设置

[spencerswagger]

@JJH0901 谢谢你的经验分享
不过我们遇到的问题应该不同，我们是在部分电脑上启动项目时，开发端口不支持跨域。
这导致了一些问题，例如qiankun加载子应用时访问跨域，结果无法加载子应用。
我们尝试在各种环境下复现这个问题，但仍未发现原因，现暂时通过使用云IDE开发规避了该问题。

[powerfulyang]

给后来者参考如何解决跨域问题

https://powerfulyang.com/post/111#umi4-%E6%88%96%E8%80%85-umijsmax-%E4%B8%AD%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE-devserver

可以通过在根目录创建 plugin.ts，内容如下:

import type { IApi } from 'umi';

export default (api: IApi) => {
  // 中间件支持 cors
  api.addMiddlewares(()=>{
    return function cors(
      req,
      res,
      next,
    ) {
      res.setHeader('Access-Control-Allow-Origin', '*');
      res.setHeader('Access-Control-Allow-Headers', '*');
      next();
    }
  });
};

[fz6m]

参考 devServer 选项怎么配置 ，通过一些配置，理论上可以支持你想要的任何行为。

[pxim]

umi 4.0.72 里 没效果

[13621272512]

没有devServer 启动开发服务器时自动打开浏览器{open:true} 怎么配置呢

[fz6m]

不支持自动打开浏览器，可以自己写一个启动的脚本，使用 open 这个包打开浏览器