使用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
群里有相关资源
欢迎和大家一起学习、交流、提升！
==============================

最后

以上就是激情花生为你收集整理的使用vue-element-admin框架开发时遇到的跨域问题的全部内容，希望文章能够帮你解决使用vue-element-admin框架开发时遇到的跨域问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。