一、缘起
在前端开发过程中,使用本地页面进行测试存在跨域问题(如访问json格式数据等),而网络页面则不存在该问题。
WAMPSERVER是一款方便好用的网络服务器架设软件,但是安装好后只是创建了一个站点,对于测试来说极不方便,但是我们可以通过修改WAMPSERVER的配置文件,从而实现多站点的功能。
二、配置
这里我们以新增一个站点来进行说明。
首先进入wamp\bin\apache\apache2.4.9\conf,在httpd.conf文件中搜索Include conf/extra/httpd-vhosts.conf,将该行前的#去掉
进入C:\wamp\bin\apache\apache2.4.9\conf\extra文件夹,在httpd-vhosts.conf最后一行添加以下代码:
<VirtualHost *:80>
ServerAdmin webmaster@dummy-host3.example.com
DocumentRoot "C:/wamp/www"
ServerName localhost
ServerAlias localhost
<Directory "C:/wamp/www">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
<VirtualHost *:80>
ServerAdmin webmaster@dummy-host4.example.com
DocumentRoot "G:/test"
ServerName test.com
ServerAlias test.com
<Directory "G:/test">
Options Indexes FollowSymLinks
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
其中,test.com为新站点名称以及本地打开域名,G:/test为新站点的根目录。
进入C:\Windows\System32\drivers\etc,在hosts文件最后添加:
127.0.0.1 test.com
三、测试
找一个网页文件放至G:/test目录下,如:
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>WAMPSERVER</p>
<p>测试成功!</p>
</body>
</html>
重启WAMPSERVER,在浏览器中输入http://test.com/
看到下图即表明设置成功
接着,测试localhost是否能正常打开
至此,WAMPSERVER多站点配置完毕