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

36次阅读

共计 1252 个字符,预计需要花费 4 分钟才能阅读完成。

前言

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

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

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

正文完
 0