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

 

 

 

开发环境所用工具

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

 

 

 

 

==============================
QQ群：143522604
群里有相关资源
欢迎和大家一起学习、交流、提升！
==============================