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

黄良钵

分类: 程序开发 1525 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

  • 0人 Love
  • 1人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
proxyTable、Vue、跨域

作者简介: 黄良钵

打赏

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

共 0 条评论关于 “vue 配置 proxyTable 解决接口跨域请求”

Loading...