Nginx下载
-
概念
1. 高性能web服务器
2. 一般用作静态服务器, 负载均衡
3. 反向代理(跨域)
nginx.png -
下载
- win下载: 官网下载
http://nginx.org/en/download.html - mac下载:
brew install nginx
- win下载: 官网下载
-
配置文件
- win:
C:\nginx\conf\nginx.conf - mac:
/usr/local/etc/nginx/nginx.conf
- win:
-
Nginx命令
- 检测配置文件格式是否正确:
nginx -t - 启动nginx, 重启nginx:
nginx -s reload - 停止:
nginx -s stop - Mac 打开配置文件:
sudo vi /usr/local/etc/nginx/nginx.conf(也可直接编辑)
- 检测配置文件格式是否正确:
Nginx实现跨域
第一步 node服务端
const http = require('http')
const url = require('url')
const server = http.createServer((req, res) => {
const { method } = req
const { pathname } = url.parse(req.url)
res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
if (pathname === '/list' && method === 'GET') {
const data = JSON.stringify({ username: 'test', pwd: 123 })
console.log(pathname);
res.end(data)
} else {
res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' })
res.end('404 not found')
}
})
server.listen(3000, () => {
console.log('listen port at 3000')
})
第二步 web客户端
<!--通过http-server -p 3001 将客户端启动-->
<body>
测试页面
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
<script>
axios.get('http://localhost:3002/list').then(data => {
console.log(data)
})
</script>
</body>
第三步 配置nginx
# 设定http服务器, 之后请求都是http不是https
http {
server {
listen 3002; # 侦听3002端口
server_name localhost; # 客户端域名
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
# 静态资源的地址, 可不配置也能实现跨域
# location / {
# root C:/Users/80021648/Desktop/js; #定义服务器的默认网站根目录位置
# index index.html index.htm app.html; #定义首页索引文件的名称
# }
location /list{
proxy_pass http://localhost:3000/list; # 代理转发的服务端地址
}
}
}
总结
服务端: http://localhost:3000
客户端: http://localhost:3001
nginx: http://localhost:3002
客户端请求nginx监听的端口, nginx监听到端口请求, 然后代理转发的服务端地址
客户端 -> 服务端
axios.get('http://localhost:3000/list')
变成 客户端 -> nginx代理转发 -> 服务端
axios.get('http://localhost:3002/list')
