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

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

子利用动态资源跨域

在 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'
 },    
}

子利用接口代理跨域

在 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
           }
         }
     }
 }
}

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

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

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

前言

DevServer 配置解决跨域