常见的跨域配置(/config/index.js):

proxyTable: {
      '/api': {
        target: 'http://192.168.2.139:8080/Mobile/Max', // 接口的域名
        // secure: false,  // 如果是https接口,需要配置这个参数
        changeOrigin: true, // 如果接口跨域,需要进行这个参数配置,为true的话,请求的header将会设置为匹配目标服务器的规则(Access-Control-Allow-Origin)
        pathRewrite: {
          '^/api': '' //本身的接口地址没有 '/api' 这种通用前缀,所以要rewrite,如果本身有则去掉
          }
        }
    },

使用:‘/api/getData’

在开发调试时,使用axios进行数据交互时没问题。但打包部署到服务器上发现404,跨域报错了。研究发现还需要进行配置一下。

config文件夹还有2个文件dev.env.js和prod.env.js 分别是开发环境和生产环境配置文件,我们需要分别进行修改。

dev.env.js(开发环境)

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  VUE_APP_BASE_API:'"/api"'
})

prod.env.js(生产环境)

module.exports = {
  NODE_ENV: '"production"',
  VUE_APP_BASE_API:'"http://192.168.xx:xxx"' //项目api地址
}

注意属性值里面要双引号,否则会报错(Unterminated string constant)。

配置好之后,程序会自动判断当前是开发还是生产环境,然后匹配VUE_APP_BASE_API。

VUE_APP_BASE_API可以通过process.env.VUE_APP_BASE_API来访问。

每次使用:process.env.VUE_APP_BASE_API+api地址 会很麻烦,这时我们可以设置axios的baseuURL。

一般我们会自己写个axios拦截器,生成一个axios对象,进行token等安全验证。再把这个对象引用到main,js,挂载在vue实例上。这里不做相关赘述,网上有很多。

生成axios对象设置baseURL:process.env.VUE_APP_BASE_API

这是我项目中axios拦截器部分代码

设置后,记得重新启动项目。我们调用数据就可以省去process.env.VUE_APP_BASE_API了 ,直接写接口地址方法名字符串。

比如:this. $axios.get(process.env.VUE_APP_BASE_API+‘/getData’ ) 变成 this. $axios.get(‘/getData’ )

 

Logo

前往低代码交流专区

更多推荐