技术栈

Nginx 反向代理Vue Dev Node.js WEB服务出现Invalid Host header解决办法

webpack,Nginx,Vue,NodeJS,JavaScript

问题背景:现有服务器Nginx+PHP,需要在这个基础上增加Node.js反向代理。来实现部分业务采用不同技术实现。如下:

upstream nodejs {
      server 172.16.126.76:8081;
}
server {

      listen 80;
      server_name dev.test.cn;
      charset utf-8 ;
      root /users/force/desktop/project/zpjob/branches/a/web;

      location /frontend/rec {
         proxy_pass http://nodejs;
         index  index.html index.htm;
      }

      location ~ \.php$ {
         fastcgi_param CI_ENV 'development';
         fastcgi_param DEV_NAME 'Force';
         fastcgi_pass 127.0.0.1:9000;
         fastcgi_index index.php;
         fastcgi_param SCRIPT_FILENAME $document_root/$fastcgi_script_name ;
         include fastcgi_params;
      }

      location / {
         index index.php index.htm index.html ;
         if ($request_filename !~ (^index\.php|/app/|/robots\.txt|/favicon\.ico)) {
            rewrite ^/(.*)$ /index.php?$1 last;
            break;
         }
      }
 }

问题:访问http://dev.test.cn/frontend/rec后页面直接显示Invalid Host header字样。判断问题发现反向代理成功,怀疑是Webpack启开发服务限制的。查了些资料发现此解决办法好用。参考链接https://cloud.tencent.com/developer/article/1572324。在webpack根目录下找到build/webpack.dev.conf.js,添加对象disableHostCheck:true对应如下位置即可。

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    disableHostCheck: true,
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
.......
点我评论
打赏本文
二维码


46

文章

22

标签