关于跨域:前端微服务跨域配置解决办法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
                }
              }
          }
      }
     }

   也能够通过一些其余配置实现：

   这样就能在开发阶段子利用能够间接在父利用内随便拜访了。不太懂得敌人们能够。留言问我。