vue如何获得后台数据并显示?

Question

Answer 1

一: 跨域问题
下面贴出部分关键代码, 在前端处理的跨域, 建议后端拦截器设置allow-control-allow-origin= "*" 即可

vue.config.js

module.exports = {
  baseUrl: process.env.baseUrl,
  devServer: {
    port: process.env.PORT,
    proxy: {
      '/casLogin': {
        target: process.env.PROXY_TARGET,
        ws: true,
        changeOrigin: true
      }
    }
  }
    ...

.env 配置文件

#编译模式
NODE_ENV=development

#基础路径
baseUrl=/

#启动端口, 前端项目服务端口
PORT=8033

# 开发环境代理配置, 这里配置本地调试接口
PROXY_TARGET=http://127.0.0.1:8080/dpWebApi
# 是否开启DLL预编译
# true:开启，false:关闭
DllReferencePlugin=true

//2019-03-28 追加

二: 前端配置API 请求代理, 转发请求后端API
(请求代理转发问题)
1.下面依然是部分代码
projectName/src/config的http.js
下配置

/**
 * API 请求根，可以是完整域名
 * @type {string}
 */
export const API_ROOT = '/operateApi'

1. projectName/vue.config.js

Vue 全局配置文件

module.exports = {
  publicPath: process.env.PUBLIC_PATH,
  devServer: {
    port: process.env.PORT,
    proxy: {
      '/operateApi': {
        target: process.env.PROXY_TARGET,
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/operateApi': ''
        }
      },
      '/casLogin': {
        target: process.env.PROXY_TARGET,
        ws: true,
        changeOrigin: true
      }
    }
  },
    ...

1. 开发环境配置文件

# 编译模式
NODE_ENV=development

# 基础路径
PUBLIC_PATH=/

# 启动端口
PORT=8033

# 开发环境代理配置
PROXY_TARGET=http://127.0.0.1:8080

# 是否开启DLL预编译
# true:开启，false:关闭
VUE_APP_Dll_PLUGIN=true

这样请求会访问http://127.0.0.1:8033/operateApi 即访问http://127.0.0.1:8080