vue 配置 proxyTable 解决接口跨域请求

首先在 /config/index.js 中配置 proxyTable ,

proxyTable

  1. proxyTable: {
  2.           '/api': {
  3.             target: 'https://hcode.xyz',
  4.             changeOrigin: true,
  5.             pathRewrite: {
  6.               '^/api_v1': '/api_v1'
  7.             }
  8.           }
  9.         },

然后在新建个 url.js 文件, 路径为: /src/api/url.js

url.js 的内容为:

  1. var ENV = "dev"// 控制开关,dev 开发环境,release,master环境时改为 prod
  2. export default {
  3.   pathUrl:function() {
  4.     var URLS = {
  5.       dev: {
  6.         MJK: '/api_v1',
  7.         WEB_URL: {
  8.           WEB_MIAO: 'https://hcode.xyz/api_v1'
  9.         }
  10.       },
  11.       prod: {
  12.         MJK: 'https://hcode.xyz/api_v1/',
  13.         WEB_URL: {
  14.           WEB_MIAO: 'https://hcode.xyz/api_v1'
  15.         }
  16.       }
  17.     }
  18.     return URLS[ENV];
  19.   }
  20. }

最后在 main.js 中配置

  1. import rootPath from './api/url.js';
  2. new Vue({
  3.   el: '#app',
  4.   router,
  5.   components: { App },
  6.   template: '<App/>',
  7.    data: {
  8.     urlPath : rootPath.pathUrl()//通过url.js 控制 开发 和线上环境
  9.   }
  10. })

使用时:

  1. this.$http.post($root.urlPath.MJK + '/sms/sendsms', {
  2.     "phone"this.phone,
  3.     "type": '1',
  4. }, response => {})

 

参考 SeaJson

黄良钵

博客站长,前端开发工程师

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

vue 配置 proxyTable 解决接口跨域请求
返回顶部
网站稳定运行 : {{ diffYears }}年 零 {{ diffDays }}天 {{ diffHours }} 小时 {{ diffMinutes }} 分钟 {{ diffSeconds }} 秒

显示

忘记密码?

显示

显示

获取验证码

Close