docker nginx 跨域配置 uniapp h5 网页

最新推荐文章于 2025-03-14 11:23:47 发布
置顶 最新推荐文章于 2025-03-14 11:23:47 发布
阅读量2.4k 收藏 5
点赞数 3
文章标签： docker nginx uniapp h5 跨域问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39791387/article/details/111678656
版权

一. 需求:

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

二. 需要解决的问题:

  1. 使用uniapp开发调试H5时的跨域问题, 当然也可以使用官方的建议, 使用内置浏览器调试.
  2. 配置到服务器后跨域的问题(这里的跨域有三个: 前端跨域, 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" : ""
    }

然后就可以发行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" : {
                "/chinapay" : {
                    "target" : "http://192.168.100.120:7878/chinapay", 
                    "changeOrigin" : true,
                    "secure" : true,
                    "pathRewrite" : {
                        "^/chinapay" : ""
                    }
                }

改为:

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

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

诸葛老刘
关注
Mall4j商城实战 - 部署 前后端 到 docker
yueerba126的博客
11-19 981
🌌。
五、zuul 网关
Jack方
01-12 274
zuul 网关
uniApp打包H5发布到服务器（docker）
a983677218的博客
12-24 662
使用docker部署uniApp打包后的H5项目记录，好像和VUE项目打包没什么区别...
使用docker部署nginx前后端解决跨域问题.docx
03-05
使用docker部署nginx前后端解决跨域问题
docker部署vue项目解决跨域问题（一键docker解决）
2301_76633800的博客
03-14 1153
将在当前目录下寻找Dockerfile，并根据其中的指令构建一个全新的Docker镜像，命名为"vue-student-web"。- `docker build` - 基础命令，用于构建 Docker 镜像。- `vue-student-web`: 给运行的容器指定的名称。- `-t vue-student-web` - 标签参数。- `-t` 表示为新构建的镜像设置标签(tag)- `vue-student-web` 是镜像名称。- `vue-student-web`: 容器名称。
使用Docker来配置Nginx映射静态H5页面
云之彼端
06-05 965
前提：需要预装docker 1、拉取Nginx镜像 $ docker pull nginx 2、挂载镜像 $ docker run --name nginx -p 80:80 -d nginx 3、查看挂载的镜像，获取CONTAINER ID $ docker ps -a 4、从容器中复制一份配置到主机 $ docker cp 'CONTAINER ID':/etc/nginx/nginx.cnf /home/nginx/conf 5、修改配置 (注意这些路径，如果启动失败，查看/home/ngi
Docker(Nginx) 部署 uniapp
1008611的博客
12-08 1302
HBuilderX是当前最快的HTML开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛。HBuilderX-高效极客技巧。
docker-跨网络
weixin_46715997的博客
06-02 322
PS1='[\u@\h \W$(__docker_machine_ps1)]\$ '
Jenkins(docker版)自动部署vue/uni-app项目经验
m0_61613962的博客
11-23 4127
Jenkins的原理其实很简单，就是依据各种插件做package、build等功能，然后再帮你去执行一些shell命令，本篇文章参考我之前的两篇 ​​​​​​Docker创建Jenkins容器自动部署maven项目经验 vue-cli项目打包用docker部署到服务器 主要功能文件 1.default.conf /docker/jenkins_home/workspace/Moon-Vue/unpackage/default.conf server { listen 80;
Nginx 指定多个域名跨域请求配置
Linuxhus的博客
11-16 2274
nginx指定多个域名跨域请求配置 什么是跨域 假设我们页面或者应用已在 http://www.test1.com 上了，而我们打算从 http://www.test2.com 请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回“源不匹配”的错误，"跨域"也就以此由来。跨域的出现主要原因还是安全的限制(同源策略，也就是JavaScript或者Cookie只能够访问同域下的内容)，因此在日常的项目开发中会不可避免的出现跨域操作。 和打多数跨域的解决方案一样，JSON...
h5,小程序,网站都要做的话，是否可以使用同一套后端程序？
最新发布
04-03
好的，用户的问题是想了解如何设计一套通用的后端程序来支持H5、小程序和网站。首先，我需要回忆之前提供的引用内容，尤其是关于H5和小程序共用代码的部分。引用[1]和[3]提到使用Bmob的混合平台JSSDK库，可以写一份...
Nginx 跨域及代理配置跨域
mark885的博客
09-23 411
【代码】Nginx 跨域及代理配置跨域。
Docker打包部署H5项目
前端小东
09-26 1261
好久没有写笔记了，因为遇到了很多事情，换了工作，学习了很多新知识，感觉没那么多时间来些笔记了，今天有点时间了，那么就好好好整理下工作中用到的知识点吧 最近在用docker部署项目，本地可以直接运行，然后查看效果和发布，那么就来简单介绍一下如何使用吧 环境：Windows 10 1：首先安装好客户端，上官网就可以下载安装 2：安装好了之后就是这样子的，可以看到我已经有一个服务omo-h5在运行了 3：如何部署项目了，如果有服务在运行，那么必须先停止才可以 点击in use 然后点删除图标就可以了 然后主
docker容器中elasticsearch配置跨域访问（elasticsearch-head插件访问不到es集群）
m0_67402125的博客
08-14 961
elasticsearch-head插件访问不到es集群，是因为调用过程中出现了。docker exec -it [容器名] /bin/bash。docker命令进入elasticsearch对应的容器。更改配置文件，需要使用到vim，已安装可以忽略。
利用docker部署jeecguniapp步骤
weixin_44354992的博客
06-08 507
一：更改后端接口 /common/service/config.service.js/ 与后端对接 二 ：打包更改路径 /manifest.json中更改h5配置 运行的基础路径与tomcat下的webapps的路径相同 三 docker下按照tomcat docker pull tomcat:8 docker run -id --name=mxg_tomcat -p 8888:8080 -v /usr/local/project:/usr/local/tomcat/webapps --privileged
docker 安装jenkins 跨域csrf
m0_63163813的博客
11-17 570
启动时加入红色语句 ：关闭跨域检查。
docker nginx 跨域
08-26
要在Docker中使用Nginx解决跨域问题，可以按照以下步骤进行操作： 1. 创建一个名为`nginx.conf`的配置文件，用于配置Nginx服务器。在该文件中，将添加一些跨域相关的配置。 ```conf server { listen 80; server_name localhost; location / { # 允许来自所有域名的请求 add_header 'Access-Control-Allow-Origin' '*'; # 允许的请求方法 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; # 允许的请求头 add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; proxy_pass http://your_upstream_server; } } ``` 在上述配置中，`add_header 'Access-Control-Allow-Origin' '*'` 表示允许来自任何域名的请求，您可以根据实际需求进行调整。 2. 创建一个名为`Dockerfile`的文件，用于构建Docker镜像。在该文件中，将使用官方的Nginx镜像，并将我们刚才创建的`nginx.conf`文件复制到容器内的指定位置。 ```Dockerfile FROM nginx COPY nginx.conf /etc/nginx/conf.d/default.conf ``` 3. 构建Docker镜像。在终端中，进入包含`Dockerfile`和`nginx.conf`的目录，并执行以下命令： ```bash docker build -t my-nginx . ``` 上述命令将构建一个名为`my-nginx`的Docker镜像。 4. 运行Docker容器。执行以下命令： ```bash docker run -d -p 80:80 my-nginx ``` 这将在后台运行一个名为`my-nginx`的容器，并将容器内的80端口映射到主机的80端口。 现在，您的Nginx服务器已配置完成，并且已解决跨域问题。您可以根据实际需求进行调整和定制化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值