使用vue-element-admin框架开发时遇到的跨域问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/shenzhen_zsw/article/details/82598394

开发环境所用工具

1）webpack

2）vue

3）vue-element-admin

4）http-proxy-middleware[解决跨域的webpack插件]

解决步骤

一，安装 http-proxy-middleware 插件

$ npm install --save-dev http-proxy-middleware

二，配置dev.evn.js文件

 

module.exports = {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  // BASE_API: '"http://localhost:8080/sct.kb.service"',
  // BASE_API: '"/apis"'
}

三，配置config/index.js文件

    proxyTable: {
      '/cloudServicePcAction.do': {
        target: baseUrl,
        changeOrigin: true
      }
    },

说明：

1）cloudServicePcAction.do：每个请求都会有的；

2）target：是真实的地址，例如：http://192.168.1.100:8080

3）changeOrigin:true，必须要加上，否则无效；

四、src/utils/request.js

// 创建一个axios实例
const service = axios.create({
  // baseURL: process.env.BASE_API,   
  timeout: 5000,                      // request timeout，请求超时时间,
})

说明：

    1）将baseURL注释掉；

五、重启

重启即可；

参考

http://www.cnblogs.com/zhixi/p/9541162.html