vue/cli3 跨域问题

1. 根目录中创建 .env.development

# just a flag

ENV = 'development'

# base api

VUE_APP_BASE_API = 'http://192.168.1.202:8088'

VUE_APP_BASE_PRINT= 'http://192.168.1.202:9000'

VUE_CLI_BABEL_TRANSPILE_MODULES = true

2. 根目录下创建 vue.config.js

'use strict'

const path = require('path')

const defaultSettings = require('./src/settings.js')

function resolve(dir) {

  return path.join(__dirname, dir)

}

const name = defaultSettings.title || 'vue Element Admin' // page title

const port = process.env.port || process.env.npm_config_port || 9527 // dev port

module.exports = {

  publicPath: '/',

  outputDir: 'dist',

  assetsDir: 'static',

  lintOnSave: process.env.NODE_ENV === 'development',

  productionSourceMap: false,

  devServer: {

    port: port, // 本地端口号

    open: true, // 配置自动启动浏览器

    overlay: { // 同时显示警告和错误

      warnings: false,

      errors: true

    },

    proxy: {

      '/filesUpload': {

        target: process.env.VUE_APP_BASE_PRINT, // 你请求的第三方接口

        changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

        pathRewrite: { // 路径重写，

          '^/filesUpload': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/filesUpload即可。

        }

      }

    }

  }

}

3. 请求前安装 axios 配置 main.js

import axios from 'axios'

Vue.prototype.$axios = axios

axios.defaults.baseURL = '/filesUpload'

4.进行请求

import axios from 'axios';

axios.get('/filesUpload/' + this.url, {

        }).then((response) => {

          this.tabhtml = response.data

        })

注：个人理解：vue.config.js中配置是/filesUpload路径代理env.VUE_APP_BASE_PRINT（http://192.168.1.202:9000）而 main.js 中 axios.defaults.baseURL = '/filesUpload' 即 访问本地域名端口（http://localhost:9527/）实际跳转至 /filesUpload 代理的http://192.168.1.202:9000

如有错误，欢迎各位大佬指出