前端域名访问页面中的一些配置项

前端域名访问页面中的一些配置项

我们一般使用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