前端域名訪問頁面中的一些配置項

龍恩0707發表於2018-04-28
前端

前端域名訪問頁面中的一些配置項

我們一般使用webpack打包和重啟伺服器，那麼一般情況下，我們需要使用 127.0.0.1:埠號 去訪問頁面，但是我們有時候需要使用域名去訪問的話，
比如想要使用 xd.xxx.com去訪問，那麼我們可以在mac自帶的apache2下使用反向代理即可解決。如下解決方案：

在mac系統下會自帶apache2，因此命令進入  cd /etc/apache2  然後執行命令：sudo open ./httpd.conf -a 'sublime text' 使用Sublime 來編輯一下；

配置如下：

<VirtualHost *:80>
  ServerName xd.xxxx.com
  ProxyRequests off
  Header set Access-Control-Allow-Origin *
  <Proxy *>
    Order deny,allow
    Allow from all
  </Proxy>
  <Location /bus>
    ProxyPass http://localhost:8899/
    ProxyPassReverse http://localhost:8899/
  </Location>
</VirtualHost>

當瀏覽器域名訪問xd.xxx.com/bus的時候(當然資原始檔需要放到bus目錄下)，會反向代理到 本地的 http://localhost:8899/下，當然本地要啟動對應的伺服器。埠號是8899；
host 需要繫結 如下；

127.0.0.1 xd.xxxx.com

然後進入 sbin目錄下 啟動服務 sudo apachectl start
重啟命令如下 sudo apachectl restart

停止服務：sudo /usr/sbin/apachectl stop

開啟服務：sudo /usr/sbin/apachectl start

重啟服務：sudo /usr/sbin/apachectl restart

2. 伺服器端介面也可以反向代理：
如下配置：

server {
  listen 443;
  listen 80;
  server_name xy.xxx.com; // 介面的域名
  access_log  /data/www/logs/nginx/access.log main;
  add_header Access-Control-Allow-Origin http://xd.xxx.com; // 允許的域名跨域
  add_header Access-Control-Allow-Credentials true;
  include nginx_xxx.conf;
  location / {
    proxy_pass http://192.168.1.212:8136;
    include nginx_proxy.conf;
  }
  error_page   500 502 503 504  /502.html;
  location = /50x.html {
    root   html;
  }
}

如上 xy.xxx.com 是程式碼中介面的域名，因此我們也可以使用 http://192.168.1.212:8136 域名去反向代理，也就是說開發的介面是放在212伺服器上的
，但是我們在本地聯調的時候，我們使用 xy.xxx.com 域名，會反向代理到 開發環境中的212伺服器上的，http://192.168.1.212:8136；

3. 前端資源反向代理到測試環境中，比如伺服器212環境。

server {
  listen 443;
  listen 80;
  server_name xd.xxx.com;  // 頁面訪問的域名
  access_log  /data/www/logs/nginx/access.log main;
  add_header Access-Control-Allow-Origin *;
  include nginx_xxx.conf;
  location / {
    root html/xd_resources;  // 前端資源存放的路徑
    index index.html;
    include nginx_proxy.conf;
  }
  location ~* \.(eot|ttf|woff)$ {
    root html/xd_resources;
    add_header Access-Control-Allow-Origin *;
  }
  error_page   500 502 503 504  /502.html;
  location = /50x.html {
    root   html;
  }
}

注意：如上第2點和第3點是放在比如測試環境212伺服器上這樣配置的，那麼host需要繫結：

開發介面繫結： 192.168.1.212 xy.xxx.com
前端資源的繫結 192.168.1.212 xd.xxx.com

相關文章