vue解决跨域

1、配置vue.config.js

  devServer: {
    port: port,
    // open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/device': {
        target: 'http://xx.xx.xxx.xx:8080/',//跨域接口地址
        changeOrigin: true,
        pathRewrite: { '^/device': '/device' }
      }
    }
 },

2、请求接口地址:例如:http://xx.xx.xxx.xx:8080/device/apply/update

3、我们实际请求的是:例如:http://localhost:8080/device/apply/update

4、axios实例

const service = axios.create({
  baseURL:process.env.VUE_APP_BASE_API,
  timeout: 5000 // request timeout
})

5、请求

export function applyEdit(data) {
  return uploadHttp.post(
    '/apply/update',
    data
  )
}

 6、.env.development  

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/device'
VUE_CLI_BABEL_TRANSPILE_MODULES = true

7、.env.production 

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = 'http://xx.xx.xxx.xx:8080/device'

 

posted @ 2021-07-19 16:21  (⊙o⊙)买噶  阅读(322)  评论(0编辑  收藏  举报