vue跨域代理的设置

假如你要用的接口是:http://jspang.com/DemoApi/oftenGoods.php

第一步:找到config文件夹中的index.js设置pxoxyTable

dev: {

    proxyTable: {
    '/api': {
    target: 'http://jspang.com/', // 设置你调用的接口域名
    changeOrigin: true, // 是否跨域
    pathRewrite: {
    '^/api': '/'      // 这里可以理解为用‘/api’来代替target里面的地址,例如我们调用http://jspang.com/DemoApi/oftenGoods.php,直接写成‘/api/DemoApi/oftenGoods.php’就可以了
    }
    }
    },

}

第二步:开发环境和生产环境的配置

在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"', // 开发环境
  API_HOST: '"/api/"'

})


module.exports = {
  NODE_ENV: '"production"', // 生产环境
  API_HOST: '"http://jspang.com/"'

}


第三步:调用

created() {
console.log(process.env.NODE_ENV, '环境')
let urlHost = process.env.API_HOST // 会自动判断当前是开发还是生产环境,然后自动匹配API_HOST
  axios.get(urlHost + 'DemoApi/oftenGoods.php')
.then((res) => {
console.log(res, '代理之后')
})
},

你可能感兴趣的:(vueJs)