前端微服务跨域配置解决办法，devServer为例

前言

• Nginx: 在上一篇我提到的跨域配置是正式上线的时候使用nginx做为配置的参考。
• Webpack: 而我们更多的时候是在开发阶段就需要通过跨域进行联合开发各个子应用部分功能

DevServer配置解决跨域

1. 子应用静态资源跨域

   • 在webpack.config.js或者vue.config.js找到devServer属性；配置如下：

     devServer: {
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Allow-Methods': 'GET,POST,OPTIONS,PUT,DELETE,FETCH',
        'Access-Control-Allow-Headers': 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization'
      },    
     }

2. 子应用接口代理跨域

   • 在webpack.config.js或者vue.config.js找到proxy属性；配置如下：

     devServer: {
      proxy: {
          '/api': {
              target: 'http://xxx.xx.xx.x',
              changeOrigin: true,
              pathRewrite: {
                '^/api': ''
              },
              onProxyRes: function (proxyRes, req, res) {
                if (req.method === 'OPTIONS') {
                  proxyRes.headers['Access-Control-Allow-Origin'] = req.headers.origin || '*'
                  proxyRes.headers['Access-Control-Allow-Credentials'] = true
                  proxyRes.headers['Access-Control-Allow-Methods'] = 'GET,POST,OPTIONS,PUT,DELETE,FETCH'
                  proxyRes.headers['Access-Control-Allow-Headers'] = 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization'
                  proxyRes.statusCode = 204
                } else {
                  proxyRes.headers['Access-Control-Allow-Origin'] = req.headers.origin || '*'
                  proxyRes.headers['Access-Control-Allow-Credentials'] = true
                }
              }
          }
      }
     }

   也可以通过一些其他配置实现：
   
   这样就能在开发阶段子应用可以直接在父应用内随意访问了。不太懂得朋友们可以。留言问我。