一、真机测试
有时候我们做了一个静态页面,需要手机查看效果,使用nginx。
1,手机和电脑在同一个局域网下(电脑可以放个wifi出来给手机连)。
2,安装nginx,网上查。
3,找这个目录下的这个文件,打开。
4,配置文件,listen 配置端口,location下的root 后面跟着index.html所在文件夹路径,
直接复制的路径是这个C:\Users\lalalalala\Desktop\hongbao\templates,注意要把“\”换成“/”,否者会报错(我就是在这里坑了很久)。
5,特别强调,注意开发调试时的console.log(),打印过多会撑爆微信浏览器缓存,就打不开页面了,坑死。
#gzip on;
server {
listen 8088;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root C:/Users/lalalalala/Desktop/hongbao/templates;
index index.html index.htm;
}
6,nginx 命令
注意,敲命令一定要用cmd,Window powerShell会报错。
cd 到nginx.exe所在文件目录下,
开始 :start nginx
重启 :nginx -s reload (改了配置文件就要重启)
停止 :nginx -s stop
6,打开后,查一下电脑ip,在cmd里面直接输入ipconfig,回车就会出现啦。
ip:端口(如 192.168.1.1),就能看到网页啦
二、跨域
假设我们在开发一个项目,我这边写好了页面,同事写好了服务器,给的测试接口是:http://192.168.1.1:8080/mobile/operation/reportForm/recordingTime.json,
那么跨域就是如下解决。
修改nginx.conf, 在server里添加一个location,如下,
/marketing为代表http://192.168.1.1:8080,在ajax请求中
url直接写成 /marketing/****/****/***.json,就行了,
当然,上线到生产环境得改回来。这样就是可以实现跨域测试了。
这种适用于直接写HTML页面时使用,如果用vuecli的话,可以参考这里vue cli3 简单解决跨域问题,也可以参考这里vuecli3复杂解决跨域、手机真机调试
)
server {
listen 8088;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root C:/Users/lalalalala/Desktop/hongbao/templates;
index index.html index.htm;
}
#新添加的,/marketing为代表http://192.168.1.1:8080;,
location /marketing {
proxy_pass http://192.168.1.1:8080; # 设置代理服务器的地址,即你同事给你的数据接口,域名是另一台电脑的域名。
# proxy_cookie_domain b.test.com a.test.com; # 修改cookie,针对request和response互相写入cookie
}