qq_36426433
程序猿99号
采纳率75%
2019-02-11 15:23 阅读 16.7k

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

图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

5条回答 默认 最新

  • 已采纳
    niaonao niaonao 2019-02-12 09:06

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

    图片说明

    点赞 1 评论 复制链接分享
  • alnorthword 禅思院 2019-02-11 15:28

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

    点赞 1 评论 复制链接分享
  • littlePig_zzf little pig 2019-02-11 15:32

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

    点赞 1 评论 复制链接分享
  • caoshirou6176 李大嘴讲程序人生 2019-02-11 16:15

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

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

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

    点赞 1 评论 复制链接分享
  • oLiFeng1234 李锋 2019-02-11 16:34

    跨域的话 试试 用 jsonp

    点赞 1 评论 复制链接分享

相关推荐