一：概述

介绍Vue axios token 跨域读取 K8S 1.9版本API 实现。

二：步骤如下

1：创建一个 RBAC账号[alinux.yaml]

kind: ClusterRoleBinding

apiVersion: rbac.authorization.k8s.io/v1beta1

metadata:

name: alinux

annotations:

rbac.authorization.kubernetes.io/autoupdate: "true"

roleRef:

kind: ClusterRole

name: cluster-admin

apiGroup: rbac.authorization.k8s.io

subjects:

- kind: ServiceAccount

name: alinux

namespace: kube-system

---

apiVersion: v1

kind: ServiceAccount

metadata:

name: alinux

namespace: kube-system

labels:

kubernetes.io/cluster-service: "true"

addonmanager.kubernetes.io/mode: Reconcile

2:查看账号信息

[root@centos7-K8s-M-etcd1 ssl]# kubectl get secret -n kube-system|grep alinuxalinux-token-t65t6 kubernetes.io/service-account-token 3 7dName: alinux-token-t65t6Namespace: kube-systemLabels: <none>Annotations: kubernetes.io/service-account.name=alinux kubernetes.io/service-account.uid=00c85d61-d542-11e8-8988-5254006670fdType: kubernetes.io/service-account-tokenData====ca.crt: 2057 bytesnamespace: 11 bytestoken: eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJrdWJlcm5ldGVzL3NlcnZpY2VhY2NvdW50Iiwia3ViZXJuZXRlcy5pby9zZXJ2aWNlYWNjb3VudC9uYW1lc3BhY2UiOiJrdWJlLXN5c3RlbSIsImt1YmVybmV0ZXMuaW8vc2VydmljZWFjY291bnQvc2VjcmV0Lm5hbWUiOiJhbGludXgtdG9rZW4tdDY1dDYiLCJrdWJlcm5ldGVzLmlvL3NlcnZpY2VhY2NvdW50L3NlcnZpY2UtYWNjb3VudC5uYW1lIjoiYWxpbnV4Iiwia3ViZXJuZXRlcy5pby9zZXJ2aWNlYWNjb3VudC9zZXJ2aWNlLWFjY291bnQudWlkIjoiMDBjODVkNjEtZDU0Mi0xMWU4LTg5ODgtNTI1NDAwNjY3MGZkIiwic3ViIjoic3lzdGVtOnNlcnZpY2VhY2NvdW50Omt1YmUtc3lzdGVtOmFsaW51eCJ9.FYbkoKd_8SeuAUVDFb6p1RMraNpMfdrowsfeReWdeKm_-YphG32UztVlZvnQSvxlhSVbpGxP7Cjr0azgPbd2C6tIKzCbCulqWwME1h8T33IV02518ZZOaN3jyqqXzWJ6yEFNx9biqffgWWAwOhhVIOer_3DT8lyoDKJRC7JrLxaubliE1jCDYlcag5dmldhkS1U4EH96Px97Z7itzbKtx4M2DfOUXygQkyCG8_VCEhw5eQwQPO1Y9es3EtvMxONj1OO2h9YXuT62Heflz5MsQ4mHKNbuz0Gmz1e1xFV1HAWlQTN3Pz9qzVJ8305IjwVqVrV_-32aLM1GXnrrzKYBssr_nP1FMub0uEjvzOeGJEz6pQ1NLA1Bi0keHINr0yDUXFXE_LUNwS3ZNe4iqVOuwIsKp6pQz-cpnjjTKq5RpvmWlOyHmQ4jKKsAve2ywLZpNoda0S6GgDoSoUP-AvFygEoTbCWqqmTxUS4sgtiLroLEpFxadndjM2leD99wsd9bNDrq65eT2i_0rqa8uE15HORLB6tfKBag5nYp9MrbtKMJqXLqnkosAIy8STqslKuccHPvKKfgsgb4r6O0aPZCK4EdkB3zbG5lAJ3iFj9fTKRl-iFD9_iSEWtavAAbsgGc-it9xyJ0lJ2nwSUM6WXz1rnKcC_TV3pEqXKsE54F6-s[root@centos7-K8s-M-etcd1 ssl]# kubectl config viewapiVersion: v1clusters:- cluster: certificate-authority-data: REDACTED server:  name: kubernetescontexts:- context: cluster: kubernetes user: kubernetes-admin name: kubernetes-admin@kubernetescurrent-context: kubernetes-admin@kubernetes

3：Vue axios 代码[安装参见相关文章]

1：安装axios cnpm install axios --save 阿里源2：VScode 微软前端工具3：postman 模拟请求软件1：因访问第三方API axios 属于夸域访问，跨域访问存在两种解决方案【服务器器代理，另外一种方式 vue 代理，本文采用vue代理】。1：代码<App.vue> import axios from 'axios'export default { name: 'App', mounted() { var url=this.HOST+'api/v1/namespaces' axios.get(url,{ headers: { Authorization: 'Bearer '+'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJrdWJlcm5ldGVzL3NlcnZpY2VhY2NvdW50Iiwia3ViZXJuZXRlcy5pby9zZXJ2aWNlYWNjb3VudC9uYW1lc3BhY2UiOiJrdWJlLXN5c3RlbSIsImt1YmVybmV0ZXMuaW8vc2VydmljZWFjY291bnQvc2VjcmV0Lm5hbWUiOiJhbGludXgtdG9rZW4tdDY1dDYiLCJrdWJlcm5ldGVzLmlvL3NlcnZpY2VhY2NvdW50L3NlcnZpY2UtYWNjb3VudC5uYW1lIjoiYWxpbnV4Iiwia3ViZXJuZXRlcy5pby9zZXJ2aWNlYWNjb3VudC9zZXJ2aWNlLWFjY291bnQudWlkIjoiMDBjODVkNjEtZDU0Mi0xMWU4LTg5ODgtNTI1NDAwNjY3MGZkIiwic3ViIjoic3lzdGVtOnNlcnZpY2VhY2NvdW50Omt1YmUtc3lzdGVtOmFsaW51eCJ9.FYbkoKd_8SeuAUVDFb6p1RMraNpMfdrowsfeReWdeKm_-YphG32UztVlZvnQSvxlhSVbpGxP7Cjr0azgPbd2C6tIKzCbCulqWwME1h8T33IV02518ZZOaN3jyqqXzWJ6yEFNx9biqffgWWAwOhhVIOer_3DT8lyoDKJRC7JrLxaubliE1jCDYlcag5dmldhkS1U4EH96Px97Z7itzbKtx4M2DfOUXygQkyCG8_VCEhw5eQwQPO1Y9es3EtvMxONj1OO2h9YXuT62Heflz5MsQ4mHKNbuz0Gmz1e1xFV1HAWlQTN3Pz9qzVJ8305IjwVqVrV_-32aLM1GXnrrzKYBssr_nP1FMub0uEjvzOeGJEz6pQ1NLA1Bi0keHINr0yDUXFXE_LUNwS3ZNe4iqVOuwIsKp6pQz-cpnjjTKq5RpvmWlOyHmQ4jKKsAve2ywLZpNoda0S6GgDoSoUP-AvFygEoTbCWqqmTxUS4sgtiLroLEpFxadndjM2leD99wsd9bNDrq65eT2i_0rqa8uE15HORLB6tfKBag5nYp9MrbtKMJqXLqnkosAIy8STqslKuccHPvKKfgsgb4r6O0aPZCK4EdkB3zbG5lAJ3iFj9fTKRl-iFD9_iSEWtavAAbsgGc-it9xyJ0lJ2nwSUM6WXz1rnKcC_TV3pEqXKsE54F6-s' } }) .then(function (response) { console.log(response) }) }}

app.vue

3代理设置

module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: '', changeOrigin: true, secure: false, pathRewrite: { '^/api': '' } } },*******src/main.js******Vue.prototype.HOST = '/api'*******config/index.js******module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: '', changeOrigin: true, secure: false, pathRewrite: { '^/api': '' } } },

proxy

4:postman 设置

postman

postman

postman closed ssl

postman oK

5:启动vue 实际测试

PS D:\app\mypro> npm run dev> mypro@1.0.0 dev D:\app\mypro> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 95% emitting DONE Compiled successfully in 4763ms 19:56:46 I Your application is running here:  WAIT Compiling... WAIT Compiling... 20:30:49 95% emitting DONE Compiled successfully in 841ms 20:30:50 I Your application is running here:  WAIT Compiling... 20:33:45 95% emitting DONE Compiled successfully in 1953ms 20:33:48 I Your application is running here:  WAIT Compiling... 20:33:51 95% emitting DONE Compiled successfully in 519ms 20:33:51 I Your application is running here:  WAIT Compiling... 20:33:52 95% emitting DONE Compiled successfully in 228ms 20:33:52 I Your application is running here: 

cnpm run dev

6:chrome 输出

chrome 调试

三：分享

只要坚持解决问题，都会有收获。[花三天工作业务时间6小时（零基础）]。