vue加跨域代理静态文件404_vue-cli 设置跨域代理 线上地址报404

本文主要探讨vue-cli设置跨域代理时,本地能正常访问,但线上地址报404的问题。给出了vue-cli中跨域代理设置代码,以及utils.js文件里请求地址的设置代码,还提及线上报错情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue-cli 设置跨域代理,本地正常访问,线上地址报404。这是什么原因?

vue-cli中跨域代理设置:

module.exports = {

dev: {

// Paths

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {

'/api': {

target: 'https://xxx.xxx-xxx.com',

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

}

},

// Various Dev Server settings

host: ip(), // can be overwritten by process.env.HOST

port: 9999, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

autoOpenBrowser: false,

errorOverlay: true,

notifyOnErrors: true,

poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

// Use Eslint Loader?

// If true, your code will be linted during bundling and

// linting errors and warnings will be shown in the console.

useEslint: true,

// If true, eslint errors and warnings will also be shown in the error overlay

// in the browser.

showEslintErrorsInOverlay: false,

/**

* Source Maps

*/

// https://webpack.js.org/configuration/devtool/#development

devtool: 'eval-source-map',

// If you have problems debugging vue-files in devtools,

// set this to false - it *may* help

// https://vue-loader.vuejs.org/en/options.html#cachebusting

cacheBusting: true,

// CSS Sourcemaps off by default because relative paths are "buggy"

// with this option, according to the CSS-Loader README

// (https://github.com/webpack/css-loader#sourcemaps)

// In our experience, they generally work as expected,

// just be aware of this issue when enabling this option.

cssSourceMap: false,

},

build: {

// Template for index.html

index: path.resolve(__dirname, '../dist/index.html'),

// Paths

assetsRoot: path.resolve(__dirname, '../dist'),

assetsSubDirectory: 'static',

assetsPublicPath: './',

/**

* Source Maps

*/

productionSourceMap: true,

// https://webpack.js.org/configuration/devtool/#production

devtool: '#source-map',

// Run the build command with an extra argument to

// View the bundle analyzer report after build finishes:

// `npm run build --report`

// Set to `true` or `false` to always turn it on or off

bundleAnalyzerReport: process.env.npm_config_report

}

}

utils.js 文件中的请求地址设置:

function network (path, flag) {

if (flag) {

return `api/${path}`

}

return `api/api/${path}`

}

本地请求正常,线上请求会报404 的错误,线上报错图片:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值