VUE,HbuilderX开发H5页面,配置调试,部署以及JWT,Token。调用本机netcore接口

news/2024/11/15 21:48:20/文章来源:https://www.cnblogs.com/x1yun/p/18202400
花了一周时间,测试了各种方式。对于VUE开发H5页面,然后部署到Nginx服务。再调用本地的HTTPS接口。

1、本地开发及使用IE或Chrome进行开发调试,并调用本地接口同步开发。
本地Netcore,开发按原有方式进行。
Hbuilderx,开发并调用本地接口。设置时,不要使用Https进行。直接用http即可。
Hbuilderx的manifest.json,配置如截图
 "h5" : {
        "devServer" : {
            "port" : 8080,
            "disableHostCheck" : true,
            "https" : false,
            "hot" : false, // 热更新
            "proxy" : {
                "/api": {
                    "target" : "http://localhost:43748/api", // 你需要反向代理的域名或ip,可以设置本地IP地址和端口。
                    "changeOrigin" : false, //允许跨域
                   "secure" : false,// 设置支持https协议的代理  
                    "pathRewrite" : {
                        "^/api" : "/"
                    }
                }
            }
        },
        "router" : {
            "mode" : "history"
        }
}
URL参数设置:UrlWXappTest:"/api/oauth/WXappTestAsync",///微信H5用户信息绑定(测试登录入口)
注意红色部分,设置时,设置为http模式。如果设置为https,会报跨域错误。注意/api的写法。
pathRevrite的地方写了“^/api”:"/",在target上,必须要写“http://xxxx:43748/api”

2.重点介绍部署的时候,Nginx,及VUE要注意的地方。
VUE部分,只需要处理:proxy=>api=>target的部分,修改为Nginx需要访问的接口地址。比如http://www.abc.com。或者http://127.0.0.1:5010 ;
重点介绍Nginx的设置:
####### 顺风车H5访问###################
server {
    listen       80;
    server_name  oncar.xxdmmj.com;
     rewrite ^(.*)$ https://$host$1 permanent;
}
server {
    listen  443 ssl ;
    server_name  oncar.xxdmmj.com;
    
  #ssl证书地址
ssl_certificate /etc/ssl/certs/8449059_oncar.xxdmmj.com.pem;
#pem文件的路径
ssl_certificate_key  /etc/ssl/certs/8449059_oncar.xxdmmj.com.key;
#key文件的路径
#ssl验证相关配置
  ssl_session_timeout 5m;  #缓存有效期
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; #加密算法
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;#安全链接可选的加密协议
ssl_prefer_server_ciphers on;  #使用服务器端的首选算法
  ssl_session_cache shared:SSL:10m;
    location / {
     add_header 'Access-Control-Allow-Origin' $host;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
   try_files $uri $uri/ /index.html;
root /www/wwwroot/xxdmmj_oncar; ##项目路径
index index.html;
  rewrite ^.+(?<!js|css|png|map)$ /index.html break;
}
    location ^~/api/{
  add_header 'Access-Control-Allow-Origin' $host;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     proxy_pass http://127.0.0.1:5010;
    }
error_page 500 502 503 504 /50x.html;
location = /50x.html {}
}
############## oncar.xxdmmj.com
####### 顺风车H5访问

蓝色部分,是设置JWT的token。红色部分特别注意:
 try_files $uri $uri/ /index.html;   
该设置是对Hbuilderx发布是生成H5的发布包时,只有index.html及static的静态文件包的模式,设置后,可以跳转页面。不设置会报“Please enable JavaScript to continue” 说是启动JAVAScript,其实不是。
 rewrite ^.+(?<!js|css|png|map)$ /index.html break;   是对JAVA的一些解析会报“ XXXXXXXX token< ”错误。加上这句即可。

   proxy_pass http://127.0.0.1:5010;这里与VUE中的target设置一致。(不一致是不可以的,会出现访问的时候,代理是转向了VUE的"devServer"中的target地址),这里可以换到其他的接口,但最好是不在同一台服务器。目前只测试了同一台服务器的时候。使用该方式,可以传递token。如果不是同一台服务器,同时又必须https访问。则可以修改这个地方和VUE的target为Https的访问即可。比如,本地调试,调用远程服务器的API接口。可以设置为https模式

 
注意:
在使用域名进行接口访问的时候(往往会部署在不同的服务器上,当然部署在同一服务器也可以。):
VUE的target为:"https://api.xxxxxx.com/api"的时候,在Nginx的 location ^~/api/{}中的 proxy_pass https://api.xxxxx.com;不要配/api

使用本地接口(http:127.0.0.1:5010)访问数据的好处是,不需要将接口暴露在外部(即,不用配外部域名,不设置外部访问,提高数据安全,但是本地netcore接口还是要运行,就是还是需要用“进程守护管理器”,对进程进行持续的运行)

nginx,的设置中,location ^~/api/{} 该内容必须配置。不配置将不能访问。

HbuilderX的manifest.json修改target后,要记得重启整个HbuilderX,否则,有可能出现不更新配置的情况

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/709322.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

某东h5st4.7 加密参数(二)

接着上一篇文章,由于最近比较忙,没有时间看。今天有时间看看上一篇没有说完的其他加密参数。仅供学习交流! 1、fp的生成,搜索关键词 fingerprint ,即可查看到生成位置调试可以找到生成位置2、请求获取tk algo中参数expandParams,如下图调试可以获取到参数expandParams从…

最初,进入二次元是什么时候?

最初,进入二次元是什么时候呢?或许是一部吸引人的动漫,是一位帅气漂亮的人物,也许是一次不经意的一撇,也许是一位朋友的强烈推荐,Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解`…

mit6.828笔记 - lab4 Part B:写时复制Fork

Part B Copy-on-Write Fork Unix 提供 fork() 系统调用作为主要的进程创建基元。fork()系统调用复制调用进程(父进程)的地址空间,创建一个新进程(子进程)。 不过,在调用 fork() 之后,子进程往往会立即调用 exec(),用新程序替换子进程的内存。例如,shell 通常就是这么…

萌音影视 - 在线影视应用

萌音影视 - 在线影视应用 基于优雅的 laravel 框架和一点都不妹子的 妹子UI 的在线影视应用Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 萌音影视 - 在线影视应用 日期:2018-9-25 …

这本轻小说真厉害!

《我的青春恋爱物语果然有问题》连续三年蝉联这本轻小说真厉害的榜首!因为大春物实力太作弊,当年大老师不仅在男生分类第一,就连全部角色排名也获得了第一位。Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内…

放学后茶会

如果要给回忆的碎片 取名保存起来 我想 “宝物”再合适不过Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 放学后茶会 日期:2018-9-14 阿珏 二次元 浏览:1829次 评论:3条ねぇ呐如…

经纬恒润第三代重载自动驾驶平板车

为了应对港口无人化运营在实质化落地过程的挑战,经纬恒润借助自身在无人驾驶领域的深厚积累与实践,改款升级了新一代重载自动驾驶平板车。 随着无人驾驶在封闭场地和干线道路场景的加速落地,港口作为无人化运营的先行者,其场景的复杂度、特殊性对无人化运营的技术提出…

.NET6中使用Log4net记录日志(二)记录日志到SqlServer数据库

使用Log4net记录日志到SqlServer数据库1、引用NuGet包(System.Data.SqlClient) 2、创建SqlServer数据库表(ProgramLog)CREATE TABLE ProgramLog (Id INT IDENTITY(1,1) PRIMARY KEY,[Date] DATETIME,--记录时间[Level] NVARCHAR(128),--日志级别[RunTime] VARCHAR(128),--执…

DP32RF002 是深基于 ARM Cortex-M0+内核的超低功耗、高性能的、单片集成 (G)FSK/OOK 无线收发机的 32 位 SoC 芯片

产品简介DP32RF002 是深基于 ARM Cortex-M0+内核的超低功耗、高性能的、单片集成 (G)FSK/OOK 无线收发机的 32 位 SoC 芯片。工作于 200 ~960MHz 范围内,支持灵活可设的数据包格式,支持自动应答和自动重发功能,支持跳频操作,支持 FEC 功能,同时内部集成了完整的射频接收机…

12代处理器在虚拟机中安装Windows98SE

最近想把以前写的那个Windows98开始菜单完善一下,就想装个Windows98来参考参考。这里把安装过程分享一下。 项目地址:https://github.com/zhaotianff/WindowsX.git 路过的小伙伴可以帮忙点个star。 本文以VMware17虚拟机为例,介绍如何在12代处理器中安装Windows 98SE。 安装…

配置AutoFacManger.cs

使用配置AutoFacManger的好处是不用我们像之前一样写一层注入一层,这样自动注入只要我们命名规范的话,就可以实现不在用去Program中手动后注入 创建一个类里边写public class AutoFacManger : Autofac.Module{/// <summary>/// 自动注入/// </summary>/// <pa…

小米面试:如何实现优先级线程池?

我们知道,线程池中的所有线程都是由统一的线程工厂来创建的,当我们指定线程工厂时,线程池中的所有线程会使用我们指定的线程工厂来创建线程;但如果没有指定线程工厂,则会使用默认的线程工厂 DefaultThreadFactory 来创建线程,核心源码如下: DefaultThreadFactory() {@Su…