背景
学习前端开发,想要调试静态页面以及js,发现直接本地打开会有跨域异常。因此,需要启动一个静态服务器,只负责当前目录的文件路由。
目前尝试了两种方式。一种是Nginx
, 一种是NodeJS服务器。最终推荐NodeJS。
1. Nginx启动静态页面
1.1. 安装
下载安装Nginx,在Mac下安装如下:
brew install nginx
1.2 配置
Mac通过brew安装后的配置文件位于:/usr/local/etc/nginx
.
修改端口和文件目录:
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 启动和关闭
启动
nginx
关闭
nginx -s stop
启动后,打开浏览器,输入:localhost:8070/xxx.html即可。
2. 通过NodeJS的本地服务器
本次选用http-server
2.1 安装
npm install http-server -g
2.2 启动
http-server [path] [options]
Options
-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.
其他
直接使用IDEA或者webstom的用浏览器打开功能就可以了。
唯有不断学习方能改变! -- Ryan Miao