待發短信
在線客服
4001-021-502
9:00-21:00
最近小編了解到有客戶需要從前端調用短信寶接口來實現發送短信的功能，今天就以前端調用短信接口為例為大家講解一下，使用的短信接口是我們短信寶短信群發平臺的短信接口，我們短信寶短信群發平臺非常穩定，發送速度快，注冊就送測試短信，推薦大家使用。
注意：前端調用短信接口是非常不安全的，會出現賬號密碼泄露的安全風險。除非您完全不在意api賬號泄露，短信有可能被盜用情況下（例如內部測試范圍用），否則千萬不可以使用以下方法。
首先創建一個vue項目，當我們直接請求短信寶api接口時候，點擊發送會遇到跨域
解決方案
前端跨域解決方案有多種，小編這邊為大家介紹利用nginx反向代理來實現成功發送短信
找到自己對應域名nginx配置文件,在其增加一個localtion的代理轉發配置即可，其中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
|
server?{????????listen????????80;????????server_name??local.sms.com;????????root???"D:/phpstudy_pro/WWW/local.sms.com";????????location?/?{????????????index?index.php?index.html?error/index.html;????????????error_page?400?/error/400.html;????????????error_page?403?/error/403.html;????????????error_page?404?/error/404.html;????????????error_page?500?/error/500.html;????????????error_page?501?/error/501.html;????????????error_page?502?/error/502.html;????????????error_page?503?/error/503.html;????????????error_page?504?/error/504.html;????????????error_page?505?/error/505.html;????????????error_page?506?/error/506.html;????????????error_page?507?/error/507.html;????????????error_page?509?/error/509.html;????????????error_page?510?/error/510.html;????????????autoindex??off;????????}????????#轉發配置????????location?/sms{????????????proxy_pass?http://api.smsbao.com;????????}????????location?~?\.php(.*)$?{????????????fastcgi_pass???127.0.0.1:9000;????????????fastcgi_index??index.php;????????????fastcgi_split_path_info??^((?U).+\.php)(/?.+)$;????????????fastcgi_param??SCRIPT_FILENAME??$document_root$fastcgi_script_name;????????????fastcgi_param??PATH_INFO??$fastcgi_path_info;????????????fastcgi_param??PATH_TRANSLATED??$document_root$fastcgi_path_info;????????????include????????fastcgi_params;????????}} |
前端代碼如下
|
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
|
<template>????<view?class="content">????????<!--?<image?class="logo"?src="/static/logo.png"></image>?-->????????<view?class="text-area">????????????<button?type='primary'?@click="sendsms()">?{{title1}}</button>????????</view>????</view></template><script>????export?default?{????????data()?{????????????return?{????????????????title1:'短信發送'????????????}????????},????????onLoad()?{????????},????????methods:?{?????????????sendsms(){?????????????????uni.request({?????????????????????url:?'sms?u=短信寶賬號&p=32位MD5加密的短信寶密碼&m=手機號&c=發送內容',?//僅為示例，并非真實接口地址。?????????????????????data:?{?????????????????????},?????????????????????success:?(res)?=>?{?????????????????????????if(res?===?'0'){?????????????????????????????alert('發送成功')?????????????????????????}?????????????????????????console.log(res.data);?????????????????????????this.text?=?'request?success';?????????????????????}?????????????????});?????????????}????????}????}</script><style>????.content?{????????display:?flex;????????flex-direction:?column;????????align-items:?center;????????justify-content:?center;????}????.logo?{????????height:?200rpx;????????width:?200rpx;????????margin-top:?200rpx;????????margin-left:?auto;????????margin-right:?auto;????????margin-bottom:?50rpx;????}????.text-area?{????????display:?flex;????????justify-content:?center;????}????.title?{????????font-size:?36rpx;????????color:?#8f8f94;????}</style> |
至此大功告成，當我們再次點擊發送按鈕時，并發送成功
如有其它疑問，請咨詢短信寶客服。
最新更新
電商類
CMS類
微信類
