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

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

时间:2024-05-20 17:07:34浏览次数:22  
标签:VUE http netcore com 接口 ssl api 本机

花了一周时间,测试了各种方式。对于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,否则,有可能出现不更新配置的情况

标签:VUE,http,netcore,com,接口,ssl,api,本机
From: https://www.cnblogs.com/x1yun/p/18202400

相关文章

  • Liunx下通过netcore接口生成前端图片的问题。
    用netcore来生成前端微信Native支付的二维码。1、首先CentOS7.0要安装libgdiplus,命令如下:yuminstalllibgdiplus-devel,然后重启netcore服务。//这个地方要注意,网上有不少例子的下载命令是错的,有的时候安装不上。2、Vs代码使用QRCoder库,代码如下publicstaticMemoryStream......
  • vue3+ts 指令拖拽div案例
    <template><divclass="box"v-move><divclass="header"></div><div>内容</div></div></template><scriptsetuplang="ts">import{ref,Directive,DirectiveBinding}......
  • .NetCore工具
    1、更新GeneralUpdate:Myshiplooksold,whocanhelpmeupgradeit.(gitee.com)GeneralUpdate是一款基于.NETStandard2.0开源自动升级组件。运行环境:.NET7、.NETMAUI、Visualstudio2022(Preview)功能是否支持备注断点续传支持单次更新失败时,下次一次启动时......
  • fullcalendar-vue3插件实现时间资源图
    用的vue3+最新版本:官网链接:https://fullcalendar.io/demos效果如图:x轴为人员,y轴为当日的时间段:  1.安装引入npminstall--save@fullcalendar/core@fullcalendar/resource@fullcalendar/resource-timegrid package.json 2.附上代码<script>import{defin......
  • vue之移动端的页面在返回时记住操作的位置,提供滑动动画效果
    1、在main.js中添加importctpRouterfrom'@/ares-ui-extend/CtpRouter';Vue.use(ctpRouter,router);2、添加相应的代码在src的目录下添加 ares-ui-extend的文件夹 ares-ui-extend文件夹的下面添加CtpRouter,CtpRouter下面为: ctp-router.css内容为:/*动画样式*......
  • 阿里云 nginx 部署vue项目的代码
    在开发完成之后需要部署我们的网站项目,那么步骤如下:打包vue项目,使用npmrunbuild将vue项目打包成dist的文件夹下面,然后将dist文件夹压缩方便上传到服务器将dist.zip上传到阿里云的文件夹下面,默认情况是上传到/var/www下面,在不配置nginx的情况下,默认情况下的放项目的地方将上......
  • 基于 Spring Boot3、Vue3!这套小说系统开源了...
    大家好,我是Java陈序员。今天,给大家介绍一个基于SpringBoot3、Vue3前后端分离的小说项目,集成了主流的技术栈,可供学习使用!关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。项目介绍novel——一套基于SpringBoot3+Vue3开发......
  • 终于搞懂了!原来 Vue 3 的 generate 是这样生成 render 函数的
    前言在之前的面试官:来说说vue3是怎么处理内置的v-for、v-model等指令?文章中讲了transform阶段处理完v-for、v-model等指令后,会生成一棵javascriptAST抽象语法树。这篇文章我们来接着讲generate阶段是如何根据这棵javascriptAST抽象语法树生成render函数字符串的,本文中使用的v......
  • 『手撕Vue-CLI』添加自定义指令
    前言经上篇『手撕Vue-CLI』添加帮助和版本号的介绍之后,已经可以在控制台中输入nue--help来查看帮助信息了,但是在帮助信息中只有--version,--help这两个指令,而vue-cli中还有很多指令,例如create,serve,build等等,所以本章将继续添加自定义指令,例如create指令。添加create......
  • Vue3使用vue3-puzzle-vcode进行滑动验证
    npm包地址:https://www.npmjs.com/package/vue3-puzzle-vcodenpm安装npminstallvue3-puzzle-vcode--save最简单例子:<template><Vcode:show="isShow"@success="onSuccess"@close="onClose"/><button@click="on......