Mac设置代理的方式

在本地环境开发前端项目时，除了访问localhost外，还有通过自定义域名访问的需求，总结两种在Mac设置反向代理的方式。

要设置代理的原因
解决方法
反向代理自定义域名
- 1. Apache2代理
- 2. Charles代理

要设置代理的原因

折腾这些事情的背景需要说明一下。
首先在测试环境的域名为：project.ndev.lusssn.cn

在网页上登录成功后，后端会在cookie中存一个认证令牌，这个令牌在公司内部子系统中都是通用的，所以它的Domain为 lusssn.cn

我在本地环境开发通过 localhost 访问页面，借助Webpack反向代理，调用测试环境的后台接口（project.ndev.lusssn.cn）。然而

localhost 不能访问Domain为 lusssn.cn 的cookie

解决方法

将cookie的Domain更改为localhost
- 把Domain为 lusssn.cn 的cookie复制一份，Domain更改为localhost。
- 这样的话，令牌过期一次就要手动复制粘贴一次。
后端提供一个永久的令牌
- 感觉并不美啊，cookie清空了还得手动添加，备选方案。
本地通过带 lusssn.cn 域的自定义域名访问
- 这样即不用复制粘贴，也不用手动添加，与测试环境共享cookie。
- 堪称完美～

反向代理自定义域名

1. Apache2代理

用Mac自带的Apache2起一个服务，设置反向代理，将自定义域名 mydomain.lusssn.cn 转发到localhost指定端口的服务即可。具体步骤和细节如下：

Step 1

终端运行 sudo vi /etc/hosts
host列表中添加 127.0.0.1 mydomain.lusssn.cn

Step 2

终端运行 sudo open /etc/apache2/httpd.conf -a 'visual studio code'
用vscode或其他文本编辑器打开apache2的配置文件。

通常配置中没有启用的配置会用井号注释掉，启用反向代理需要解注释以下内容：

Include /private/etc/apache2/extra/httpd-vhosts.conf
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

找到ServerName配置，配置为 ServerName localhost

以上就完成了httpd.conf文件的修改。

Step 3

终端运行 sudo open /etc/apache2/extra/httpd-vhosts.conf -a 'visual studio code'
准备修改虚拟host文件的配置。

添加配置内容：

<VirtualHost *:80>
  ServerName mydomain.lusssn.cn
  ProxyRequests off
  <Proxy *>
    Order deny,allow
    Allow from all
  </Proxy>
  <Location />
    ProxyPass http://localhost:9026/
    ProxyPassReverse http://localhost:9026/
  </Location>
</VirtualHost>