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

前言

• Nginx: 在上一篇我提到的跨域配置是正式上线的时候使用nginx做为配置的参考。
• devServer: 而我们更多的时候是在开发阶段(webpack/vite等等打包工具)【只要是devServer这种服务器框架，都有类似的代理功能】就需要通过跨域进行联合开发各个子应用部分功能.

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,token,source'
      },    
     }

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,token,source'
                  proxyRes.statusCode = 204
                } else {
                  proxyRes.headers['Access-Control-Allow-Origin'] = req.headers.origin || '*'
                  proxyRes.headers['Access-Control-Allow-Credentials'] = true
                }
              }
          }
      }
     }

   也可以通过一些其他配置实现：
   

解决 worker 跨域问题可以将：
1、在主应用放置一份文件
2、将 url 通过 URL.createObjectURL来包装一下

new Worker(url)  改成  new Worker(URL.createObjectURL(new Blob([`importScripts('${url}');`], { type: 'text/javascript' })))
/*
直接把文件放一份到主应用public静态资源目录下，就会被直接打包进根目录。然后在子应用里判断是不是微前端环境，再决定从哪里加载资源就行
*/

这样就能在开发阶段子应用可以直接在父应用内随意访问了。不太懂得朋友们可以。可以在下面的提问中找到答案，也可以留言问我。

切记！！以上所有操作前提是将你自己Axios等请求使用的withCredentials参数删除或者设置为false

使用Vite时候需要注意静态资源打包时候对crossOrigin设置为“user-creadentials”。如果不是这个会导致子应用不会被fetch劫持，则会出现js加载的时候不会携带cookie，导致代理失败。