背景

学习前端开发，想要调试静态页面以及js，发现直接本地打开会有跨域异常。因此，需要启动一个静态服务器，只负责当前目录的文件路由。

目前尝试了两种方式。一种是Nginx, 一种是NodeJS服务器。最终推荐NodeJS。

1. Nginx启动静态页面

1.1. 安装

下载安装Nginx，在Mac下安装如下：

1
brew install nginx

1.2 配置

Mac通过brew安装后的配置文件位于：/usr/local/etc/nginx.

修改端口和文件目录：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
server {
        listen       8070;
        server_name  localhost;

        charset utf-8;

        #access_log  logs/host.access.log  main;

        location / {
            root   /Users/ryan/workspace/learning/react;
            index  index.html index.htm;
        }
....
}

1.3 启动和关闭

启动

1
nginx

关闭

1
nginx -s stop

启动后，打开浏览器，输入：localhost:8070/xxx.html即可。

2. 通过NodeJS的本地服务器

本次选用http-server

2.1 安装

1
npm install http-server -g

2.2 启动

1
http-server [path] [options]

Options

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
-p Port to use (defaults to 8080)

-a Address to use (defaults to 0.0.0.0)

-d Show directory listings (defaults to 'True')

-i Display autoIndex (defaults to 'True')

-g or --gzip When enabled (defaults to 'False') it will serve ./public/some-file.js.gz in place of ./public/some-file.js when a gzipped version of the file exists and the request accepts gzip encoding.

-e or --ext Default file extension if none supplied (defaults to 'html')

-s or --silent Suppress log messages from output

--cors Enable CORS via the Access-Control-Allow-Origin header

-o Open browser window after starting the server

-c Set cache time (in seconds) for cache-control max-age header, e.g. -c10 for 10 seconds (defaults to '3600'). To disable caching, use -c-1.

-U or --utc Use UTC time format in log messages.

-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com

-S or --ssl Enable https.

-C or --cert Path to ssl cert file (default: cert.pem).

-K or --key Path to ssl key file (default: key.pem).

-r or --robots Provide a /robots.txt (whose content defaults to 'User-agent: *\nDisallow: /')

-h or --help Print this list and exit.