代码改变世界

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

2018-04-28 22:17  龙恩0707  阅读(3158)  评论(0编辑  收藏  举报

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

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