docker nginx 跨域配置 uniapp h5 网页_uniapp docker

作者：Cpp五条 | 2024-05-16 13:32:20

踩

uniapp docker

一. 需求:

H5 网页计划配置在http://192.168.100.120:8080
接口的基础地址是:http://192.168.100.120:7878

二. 需要解决的问题:

使用uniapp开发调试H5时的跨域问题, 当然也可以使用官方的建议, 使用内置浏览器调试.
配置到服务器后跨域的问题(这里的跨域有三个: 前端跨域, nginx跨域, 接口地址跨域), 这里主要解决前两个跨域的问题, 后端跨域暂时不记录.

三. 解决使用HBuild X 开发调试H5时的跨域问题

3.1 H5发行(未解决跨域问题)

开发完成后, 使用了如下配置(有坑)进行发行.也可以理解为打包.

    "h5" : {
        "title" : "随便叫什么名字了",
        "domain" : "192.168.100.120",
        "router" : {
            "mode" : "hash",  # 这个是重点
            "base" : "./"  # 这个是重点
        },
        "devServer" : {
            "https" : false
        },
        "uniStatistics" : {
            "enable" : true
        },
        "optimization" : {
            "treeShaking" : {
                "enable" : false
            }
        },
        "template" : ""
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

然后就可以发行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" : ""
                    }
                }
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

开发调用接口数据的时候, 请求的地址就改为

const res = await this.$httpRequest({
	url:"/chinapay/bankcheck",
	method:"POST",
	})
1
2
3
4

浏览器请求的地址是:
在这里插入图片描述
虽然可以拿到数据, 但是疑问也得解决下, WHY?
manifest.json-> h5-> devServer->proxy, 改一下会行吗?

            "proxy" : {
                "/chinapay" : {
                    "target" : "http://192.168.100.120:7878/chinapay", 
                    "changeOrigin" : true,
                    "secure" : true,
                    "pathRewrite" : {
                        "^/chinapay" : ""
                    }
                }
1
2
3
4
5
6
7
8
9

改为:

            "proxy" : {
                "/api" : {
                    "target" : "http://192.168.100.120:7878", 
                    "changeOrigin" : true,
                    "secure" : true,
                    "pathRewrite" : {
                        "^/api" : ""
                    }
                }

1
2
3
4
5
6
7
8
9
10

可以吗? 当然可以!那么调用的时候应该写:

const res = await this.$httpRequest({
   url:"/api/chinapay/bankcheck",
   method:"POST",
   })
1
2
3
4

调试环境内结果如下:
在这里插入图片描述

我之前做的比较巧合(傻逼 )的是, 都使用/chinapay关键字, 导致和URL中的/chinapay搞混了, 所以老是出错.

3.2 解决 H5发布后, 在服务器上使用docker nginx代理时的跨域问题

[root@c7 nginx]# pwd
/home/project/nginx
[root@c7 nginx]# ll
total 4
drwxrwxr-x. 2 root root  24 Jan 13 17:26 conf
drwxr-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.yml
drwxrwxr-x. 2 root root  63 Dec 25 11:11 html
drwxrwxr-x. 2 root root   6 Oct 23 10:20 logs
[root@c7 nginx]# cat docker-compose.yml
version: "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.conf
user 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.conf
add_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]#
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

四. 坑点

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`, 那就添加到这里
    }
1
2
3
4

刚开始配置的时候总是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命令会显示无权限. 所以建议配置上.

至此, 需求的已完成. 记录一下, 希望有所帮助.

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】