关于Vue项目开发环境下跨域

Question

问题描述

开发环境下跨域通过devServer配置处理,请求时采用this.$axios('/api/getList')的形式代理到后端服务器，那到生产环境devServer没有作用的情况下如何给每个请求添加上baseURL而不用一个个去改呢？大家是怎么处理的啊

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

module.exports = {
    devServer: {
        port: 8000,
        proxy: {
            '/api': {
                "target": "http://servername.com,
                "changeOrigin": true,
            }
        }
    }
}

//.......

<script>
export default {
    created() {
        this.$axios.post('/api/getList').then( res => {
            console.log(res)
        })
    }
}
</script>

Answer 1

方案有很多:

1. 如果采用后端处理，可以让服务器也做一个代理转发，把带api前缀的请求转发到特定服务。
2. 如果采用前端处理，可以用一个环境标志位，

例如 const isDev = process.env.NODE_ENV === 'development'; const prefix = isDev ? 'api/' : ''。这样就可以区分开发环境和生成环境的请求prefix。然后请求的时候 this.$axios.get(prefix + '/xxx')类似这样

Answer 2

axios有baseUrl选项，根据打包环境不同选择；
本地devserver，线上类似nginx这种一样能做到devserver做到的事情

Answer 3

可以查看这篇文章：https://segmentfault.com/a/11...

你的proxy写得不对