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

原创 黄良钵  2018-04-27 18:46  阅读 60 次 评论 0 条

首先在 /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

历史上的今天:

关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情