然后就可以发行H5了.
3.2 解决 使用谷歌浏览器调试H5 时的跨域问题 请求数据的接口地址是: http://192.168.100.120:7878/chinapay/bankcheck在manifest.json->源码视图添加了以下节点 "h5" : { "domain" : "192.168.100.120", "devServer" : { "port" : 8080, # 这个是浏览器访问这个H5页面时要用到的端口号, 当然可以改 "disableHostCheck" : true, "proxy" : { "/chinapay" : { "target" : "http://192.168.100.120:7878/chinapay", # 这是我的接口地址,前几次调试,没加后面的chinapay, 一直是地址报错.拿不到数据, 后来尝试加了这个chinapay, 就可以拿到数据了. 这是犯个特低级的问题. 后面有说 "changeOrigin" : true, "secure" : true, "pathRewrite" : { "^/chinapay" : "" } } } } }
开发调用接口数据的时候, 请求的地址就改为
const res = await this.$httpRequest({url:"/chinapay/bankcheck",method:"POST",})浏览器请求的地址是:
虽然可以拿到数据, 但是疑问也得解决下, WHY?
manifest.json-> h5-> devServer->proxy, 改一下会行吗?
改为:
"proxy" : { "/api" : { "target" : "http://192.168.100.120:7878", "changeOrigin" : true, "secure" : true, "pathRewrite" : { "^/api" : "" } }可以吗? 当然可以!那么调用的时候应该写:
const res = await this.$httpRequest({ url:"/api/chinapay/bankcheck", method:"POST", })调试环境内结果如下:
我之前做的比较巧合(傻逼 )的是, 都使用/chinapay关键字, 导致和URL中的/chinapay搞混了, 所以老是出错.
3.2 解决 H5发布后, 在服务器上使用docker nginx代理时的跨域问题 [root@c7 nginx]# pwd/home/project/nginx[root@c7 nginx]# lltotal 4drwxrwxr-x. 2 root root 24 Jan 13 17:26 confdrwxr-xr-x. 2 root root 26 Jan 18 17:03 conf.d-rw-r--r--. 1 root root 474 Jan 18 16:30 docker-compose.ymldrwxrwxr-x. 2 root root 63 Dec 25 11:11 htmldrwxrwxr-x. 2 root root 6 Oct 23 10:20 logs[root@c7 nginx]# cat docker-compose.ymlversion: "3"services: web: container_name: uniapp_cib_nginx image: docker.io/nginx:latest ports: - 8080:8080 # 这里的端口可以改的 比如此处改为8080:80, 那么下面的conf.d/default.conf->server中的listen, 就应同步改为80. #network_mode: host volumes: - /home/project/uniapp_cib/unpackage/dist/build/h5/:/usr/share/nginx/html/ - /home/project/nginx/conf/nginx.conf:/etc/nginx/nginx.conf - /home/project/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf restart: always privileged: true # 建议配置上, 否则可能会出403[root@c7 nginx]# cat conf/nginx.confuser root;pid /var/run/nginx.pid;worker_processes auto;worker_rlimit_nofile 100000;events { worker_connections 2048; multi_accept on; use epoll;}http { server_tokens off; sendfile on; tcp_nopush on; tcp_nodelay on; access_log off; error_log /var/log/nginx/error.log crit; keepalive_timeout 10; client_header_timeout 10; client_body_timeout 10; reset_timedout_connection on; send_timeout 10; limit_conn_zone $binary_remote_addr zone=addr:5m; limit_conn addr 100; include /etc/nginx/mime.types; default_type text/html; charset UTF-8; gzip on; gzip_disable "msie6"; gzip_proxied any; gzip_min_length 1000; gzip_comp_level 6; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; open_file_cache max=100000 inactive=20s; open_file_cache_valid 30s; open_file_cache_min_uses 2; open_file_cache_errors on; include /etc/nginx/conf.d/*.conf; include /etc/nginx/sites-enabled/*;}[root@c7 nginx]# cat conf.d/default.confadd_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Credentials true;server { listen 8080; server_name 192.168.100.120; location / { root /usr/share/nginx/html; index index.html index.php; } location ^~ /api/ { rewrite ^/api/(.*)$ /$1 break; proxy_pass http://192.168.100.120:7878; } location = /50x.html { root /usr/share/nginx/html; }}[root@c7 nginx]# 四. 坑点 cat conf.d/default.conf文件修改 server_name由原来的localhost 改为 192.168.100.120; , 其它改不改都行下面的这个别改 location / { root /usr/share/nginx/html; # 这个容器内部的文件存放路径, 不用改 index index.html index.php; #若文件名为:`index.htm`, 那就添加到这里 } 刚开始配置的时候总是404, 后来反思,发现问题是出现在docker run 命令的参数上, 所以非常有必要记录一下. -v /home/project/uniapp_cib/unpackage/dist/build/h5/:/usr/share/nginx/html/ 这个挂载中 /home/project/uniapp_cib/unpackage/dist/build/h5/就是uniapp 发行后生成的h5目录, 里面有index.html文件和static目录./usr/share/nginx/html/是docker nginx容器内部的html文件目录, 内有: index.html, 内容是nginx的欢迎页面.这一步若配置错误, 则可能会出现404. -v /home/project/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/project/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf, 这两个挂载其实都是把宿主机上的配置文件映射到容器内部. 这一步没什么好说的.--restart=always --privileged=true 这两个参数是建议配置上, 若无, 则可能403, 我刚开始没有配置这两个参数, 容器可以启动, 但进入容器后, cd /usr/share/nginx/html目录后, 使用 ls -l命令会显示无权限. 所以建议配置上.至此, 需求的已完成. 记录一下, 希望有所帮助.