vue解决跨域

1、配置vue.config.js

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

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

3、我们实际请求的是:例如:http://localhost:8080/api/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(
    '/device/apply/update',
    data
  )
}

 6、.env.development  

# just a flag
ENV = 'development'

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

7、.env.production 

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '/api'

 

上一篇:JavaScript:模拟实现call和apply


下一篇:SQL 子查询怎么优化?写的很深的这种