token跨域（vue token）

酸菜炒牛肉

一：概述 介绍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: 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@kubernetes3：Vue axios 代码[安装参见相关文章]1：安装axios cnpm install axios --save 阿里源 2：VScode 微软前端工具 3：postman 模拟请求软件 1：因访问第三方API axios 属于夸域访问，跨域访问存在两种解决方案【服务器器代理，另外一种方式 vue 代理，本文采用vue代理】。 1：代码 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: 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: } } }, proxy 4:postman 设置 postman postman postman closed ssl postman oK 5:启动vue 实际测试PS D:appmypro> npm run dev > mypro@1.0.0 dev D:appmypro > 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 cnpm run dev 6:chrome 输出 chrome 调试 三：分享 只要坚持解决问题，都会有收获。[花三天工作业务时间6小时（零基础）]。