vue-resource獲取到數(shù)據(jù),但執(zhí)行了失敗回調(diào)

使用vue-resource發(fā)送get請(qǐng)求,可以在瀏覽器network中看到請(qǐng)求的數(shù)據(jù),但接下來(lái)的代碼卻執(zhí)行的失敗回調(diào)

代碼:

/*重新生成的一個(gè)新項(xiàng)目,重現(xiàn)了原來(lái)的問(wèn)題,方便調(diào)試*/
/*生成之后只修改了三個(gè)文件*/
/*
*    1. app.vue 一個(gè)按鈕來(lái)觸發(fā)請(qǐng)求即可
*/
<template>
  <div id="app">
    <input type="button" value="get" @click="reqGet">
  </div>
</template>
<script>
...
  methods : {
    reqGet () {
      this.$http.get("/all").then((res) => {
        console.log("success");
      },(res)=>{
        console.log("fail");
      })
    }
  }
...
</script>

/*
*    2.main.js 使用vue-resource
*/
...
import vueResource from 'vue-resource'
Vue.use(vueResource);
...
/*
*    3.webpack.config.js 添加配置
*/
...
devServer:{
...
    proxy: {
      '/api':{
        target: 'http://localhost:8848',
        pathRewrite: {
          '/api': ''
        }
      }
    }
 }
...

終端輸出:

network:

可以看到獲取的數(shù)據(jù),但是執(zhí)行的是失敗回調(diào),輸出了'fail'

回答

編輯回答

生性

console里面不是寫(xiě)的很清楚，你跨域了么

2018年8月10日 13:09

編輯回答

墨小羽

這不是跨域的問(wèn)題，而是你get的url 怎么被緩存了，返回的狀態(tài)碼是 304，
估計(jì)vue-resource 只讓 200 的才走success

2018年2月21日 01:24

編輯回答

墨小白

那就解決跨域問(wèn)題咯，我一會(huì)根據(jù)你webpack-simple的配置幫你加一個(gè)proxyTable的功能。

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    // 這里是新加的代碼--------------------
    proxy: {
      '/api':{
        target: 'http://localhost:7001',
        pathRewrite: {
          '/api': ''
        }
      }
    }
    //----------------------------------
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

我是用你說(shuō)的那個(gè)腳手架直接生成的，在這個(gè)基礎(chǔ)上直接加的proxy，還有什么疑問(wèn)嗎？

2018年4月16日 17:13