Vue axios token 跨域读取 K8S 1.9版本API

一：概述

介绍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 alinux
alinux-token-t65t6 kubernetes.io/service-account-token 3 7d
Name: alinux-token-t65t6
Namespace: kube-system
Labels: <none>
Annotations: kubernetes.io/service-account.name=alinux
 kubernetes.io/service-account.uid=00c85d61-d542-11e8-8988-5254006670fd
Type: kubernetes.io/service-account-token
Data
====
ca.crt: 2057 bytes
namespace: 11 bytes
token: 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 view
apiVersion: v1
clusters:
- cluster:
 certificate-authority-data: REDACTED
 server: https://10.118.44.250:6443
 name: kubernetes
contexts:
- context:
 cluster: kubernetes
 user: kubernetes-admin
 name: kubernetes-admin@kubernetes
current-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)
 })
 }
}

3代理设置

module.exports = {
 dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
 '/api': {
 target: 'https://10.118.44.250:6443/',
 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: 'https://10.118.44.250:6443/',
 changeOrigin: true,
 secure: false,
 pathRewrite: {
 '^/api': ''
 }
 }
 },

4:postman 设置

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: http://localhost:8080
 WAIT Compiling...
 WAIT Compiling...
 20:30:49
 95% emitting
 DONE Compiled successfully in 841ms 20:30:50
 I Your application is running here: http://localhost:8080
 WAIT Compiling... 20:33:45
 95% emitting
 DONE Compiled successfully in 1953ms 20:33:48
 I Your application is running here: http://localhost:8080
 WAIT Compiling... 20:33:51
 95% emitting
 DONE Compiled successfully in 519ms 20:33:51
 I Your application is running here: http://localhost:8080
 WAIT Compiling... 20:33:52
 95% emitting
 DONE Compiled successfully in 228ms 20:33:52
 I Your application is running here: http://localhost:8080

6:chrome 输出

三：分享

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