鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ Vue.js通過Node.js上傳圖片并獲得正確的HTTP地址后不能顯示?

Vue.js通過Node.js上傳圖片并獲得正確的HTTP地址后不能顯示?

問題:
Vuejs前端通過nodejs上傳圖片=》
nodejs返回一個http://localhost:8080/server/uploads/temp/1.jpg的路徑到前端=》
前端報404獲取不到此圖片


說明:
1.Vuejs端口8080;nodejs端口8088,已設(shè)置跨域,api請求正常(因為可以正常上傳圖片到指定文件夾)

2.用最新版腳手架創(chuàng)建新項目,把舊項目的src文件夾遷移到新項目,不報404,但是顯示空白

3.http://localhost:8080/server/uploads/temp/1.jpg,在瀏覽器直接輸入此地址也無法獲取圖片

4.嘗試過把nodejs的server遷移到可正常顯示圖片的項目上,一切正常。

回答
編輯回答
舊城人

http://localhost:8080/server/uploads/temp/1.jpg
服務(wù)端要寫路由響應(yīng)靜態(tài)資源的,光有東西匹配不上路由路徑也不會有返回

2017年3月14日 23:50
編輯回答
避風(fēng)港

已經(jīng)找到解決方案?。。。?!


先說誰的鍋:
webpack的鍋


解決方法:
webpack.dev.conf.js文件下的contentBase,被設(shè)置為了false,注釋掉就行了


原因:
contentBase在vue-cli創(chuàng)建的時候就被設(shè)為了false(不懂為什么要這樣做)
官方注釋說:與copy-webpack-plugin模塊有關(guān),具體原因待研究

  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

https://blog.csdn.net/liangkl...
https://segmentfault.com/q/10...
這兩個鏈接都有說到這個contentBase的作用


可以解決的問題:

api通過代理后能正常訪問

但是不能通過http://localhost:8080/...取到任何資源

2017年1月9日 03:36
編輯回答
哚蕾咪

上傳到node服務(wù),node服務(wù)端口是8088,那為什么要通過8080端口獲取圖片,圖片應(yīng)該在8088端口下啊。

2018年4月7日 03:23