iView-admin2.0 跨域问题解决方法

iView admin是基于Vue.js，搭配使用iView UI组件库形成的一套后台集成解决方案，由TalkingData前端可视化团队部分成员开发维护。

项目地址：https://github.com/iview/iview-admin

 

我的开发环境：

操作系统：macOS High Sierra 10.13.5

Node.js 版本： v8.9.4 

前端框架：iView-admin2.0，用Webpack4.0 + Vue-cli3.0作为基本开发环境。 访问地址 http://localhost:8080/

后端框架：eggjs v2.2.1   访问地址 http://127.0.0.1:7001

 

问题描述：

iView-admin 中使用axios访问服务端由于前端地址和后端地址不同源，所以会出现跨域问题。

调用/api/test接口是会返回如下信息：

Request URL:

http://127.0.0.1:7001/api/test

Request Method:

OPTIONS

Status Code:

405 Method Not Allowed

 

解决方法：

第一步：

在iView-admin项目主目录中找到 vue.config.js 文件，添加配置：

module.exports = {

  baseUrl: BASE_URL,

  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) 
      .set('_c', resolve('src/components'))
      .set('_conf', resolve('config'))
  },

  productionSourceMap: false,

  //添加如下配置
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:7001/',
        changeOrigin: true
      }
    }
  }
}

 添加对应的devServer设置

第二步：

找到项目的config目录下的url.js文件做如下修改。

import env from './env'



//修改DEV_URL为当前前端网站的地址
const DEV_URL = 'http://localhost:8080/'

const PRO_URL = 'https://produce.com'

export default env === 'development' ? DEV_URL : PRO_URL

修改DEV_URL为当前前端网站的地址http://localhost:8080/

重启iView-admin项目，这样axios访问的自己域内的接口地址，就会自动代理到对应的http://127.0.0.1:7001这个服务端地址上。这样就不会出现跨域问题，可以方便真实情况的调试。以上方式适用于开发环境中使用。