After Vue.js uploads the picture through Node.js and gets the correct HTTP address, it can't be displayed?
question:
Vuejs frontend uploads pictures via nodejs = "
nodejs returns a path of http://localhost:8080/server/uploads/temp/1.jpg to the frontend = "
frontend report 404 cannot get this picture
< hr >
description:
1.Vuejs port 8080 ; nodejs port 8088 , cross-domain, api request normal (because pictures can be uploaded to the specified folder normally)
2. Create a new project with the latest version of scaffolding, migrate the src folder of the old project to new project , do not report 404, but display blank
3. http://localhost:8080/server/uploads/temp/1.jpg, enter directly in the browser this address also cannot get picture
4. I have tried to migrate nodejs"s server to a project where displays pictures normally, and everything is fine.
http://localhost:8080/server/uploads/temp/1.jpg
server needs to write routing response static resources. If there is only something matching, no routing path will be returned, and there will be no return
upload to the node service. The node service port is 8088, so why should you get the picture through port 8080? the picture should be under port 8088.
has found a solution!
< hr >
whose pot first:
webpack's pot
< hr >
solution: the contentBase, under the
webpack.dev.conf.js file is set to false . Just comment it out
< hr >
reason:
contentBase is set to false when vue-cli is created (I don't know why)
official note: it is related to copy-webpack-plugin module, and the specific reason is to be studied
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: ['.*']
}
])
< hr >
https://blog.csdn.net/liangkl.
https://codeshelper.com/q/10.
both links mention the role of this contentBase
< hr >
problems that can be solved:
api can access normally after passing through the agent
but not through http://localhost:8080/. Fetch any resource
