1

vue element admin 跨域问题

 2 years ago
source link: https://segmentfault.com/a/1190000041207261
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

之前用的方法现在死活跨不过去，都快放弃，好在最后成功解决了~

1.以前使用并有效的方法

在vue.config.js里配置，具体配置位置如下：

devServer: {
    port: port,
    open: true,
    overlay: {
    warnings: false,
    errors: true
  },
  // 新增开始，注意是proxy，不在是proxyTable
  proxy: { 
      // 对应.env.development里的VUE_APP_BASE_API
      [process.env.VUE_APP_BASE_API]: { 
      // 需要跨域的域名，对应.env.development里的VUE_APP_BASE_DOMAIN
      target: process.env.VUE_APP_BASE_DOMAIN,
      // 必须加上这个才能跨域请求，不记得当时是否测试过一定要加
      changeOrigin: true,
      pathRewrite: {
        ['^' + process.env.VUE_APP_BASE_API]: ''
      }
    }
  }
  // 新增结束
  // before: require('./mock/mock-server.js') // 模拟数据注销掉
},

2.现在实现全局代理跨域proxy

Step1，配置.env.development

声明一个全局变量VUE_APP_BASE_DOMAIN = 'http://xxx.com' 为后台的域名

# base api
VUE_APP_BASE_API = '/wapi'
BACKGROUND_APPLICATION_URL = 'http://www.xxx.com'

Step2，配置 vue.config.js

在devServer下新建proxy对象如下，就是这么简单：

devServer: {
  port: port,
  open: true,
  overlay: {
    warnings: false,
    errors: true
  },
  proxy: {
    '/wapi': {
      target: process.env.BACKGROUND_APPLICATION_URL
    }
  },
  // 注释掉mock虚拟请求
  // before: require('./mock/mock-server.js')
},

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK