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

图片说明

一: 跨域问题
下面贴出部分关键代码, 在前端处理的跨域, 建议后端拦截器设置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

图片说明

你的接口出现跨域,使用代理可以解决,或者后台接口支持跨域请求.

你这个是跨域问题,如果你们后端的伙伴不处理的话,那你只能前端做处理,修改config>index.js >dev > proxyTable属性

请参考这个项目: https://github.com/yongkale/black

要点: 在node里面转发的处理和 java 中的AppApplication 类。

里面都有注释。 看完希望给个start、

跨域的话 试试 用 jsonp