vue.js - 为什么在 vue.config.js 中代理 404
问题描述
我有一个小前后端分离的项目,有开发环境和生产环境,所以想设置代理调用api。vue/cli 版本是 4.6.5。
文件结构:
src
axios
api.js
request.js
components
home
LastBlogs.vue
.env.development
.env.production
package.json
vue.config.js
.env.development:
NODE_ENV = 'development'
VUE_APP_BASE_API = '/dev-api'
VUE_APP_API_ADDRESS= 'http://localhost:8080/blog/'
.env.生产:
NODE_ENV = 'production'
# base api
VUE_APP_BASE_API = '/api'
# api publicPath
VUE_APP_API_ADDRESS= 'http://localhost:8080/blog'
vue.config.js:
'use strict'
var path = require('path')
module.exports = {
configureWebpack: {
devtool: 'source-map'
},
assetsDir: 'static',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 8001,
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: [process.env.VUE_APP_API_ADDRESS], // api地址
changeOrigin: true,
ws: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '/api',
}
}
}
}
}
axios:</p>
import axios from 'axios'
import qs from 'qs'
// import {app} from '../main.js'
console.log(process.env)
/****** 创建axios实例 ******/
const request = axios.create({
baseURL: process.env.VUE_APP_API_ADDRESS,
timeout:5000
})
// some code of interceptors
export default request;
api.js:
import request from './request.js'
var api = process.env.VUE_APP_BASE_API //'/api'
export function getLastBlogs(){
return request({
url: api+'/blog/lastBlogs',
method: 'get'
})
}
我在 vue 文件中调用 api,如下所示:
<script>
import {getLastBlogs} from '@/axios/blogApi.js'
export default {
name: 'LastBlogs',
data() {
return {
blogs: ["AAAA", "BBBB"]
}
},
created: async function(){
let res = await getLastBlogs();
this.blogs = res.data
}
}
</script>
我在终端收到 404: 错误:xhr.js:160 GET http://localhost:8080/blog/dev-api/blog/lastBlogs 404
并且后端的api没问题: 当我在浏览器中输入http://localhost:8080/blog/api/blog/lastBlogs时,我得到这个: {"code":"0","msg":"操作成功","data":[{"id":1,"blogUser":1,"blogTitle":"test1","blogDescription":"for test","blogContent":"ABABABAB","blogCreated":" 2020-09-20T10:44:01","blogStatus":0},{"id":2,"blogUser":1,"blogTitle":"test2","blogDescription":"for test","blogContent ":"BABABABABA","blogCreated":"2020-08-20T10:44:01","blogStatus":0}]}
我该怎么办?谢谢。
解决方案
因此,您正在配置 Vue CLI dev-server(在端口 8001 上运行)将所有请求代理/api
到http://localhost:8080/blog/api
(服务器),但同时将 Axios 配置为使用baseURL: process.env.VUE_APP_API_ADDRESS
...这意味着 Axios 将所有请求直接发送到您的服务器而不是代理...
只需baseURL: process.env.VUE_APP_API_ADDRESS
从 Axios 配置中删除它
我也相信您pathRewrite
在代理配置中的选项不正确。
- 您将请求发送到
/dev-api/blog/lastBlogs
- 请求转到 Vue 开发服务器 (
localhost:8001
) - 代理转换
/dev-api
为http://localhost:8080/blog/dev-api
=http://localhost:8080/blog/dev-api/blog/lastBlogs
pathRewrite
应用于URL 的整个路径部分/blog/dev-api/blog/lastBlogs
- - RegEx^/dev-api
将不匹配
尝试更改pathRewrite
为[process.env.VUE_APP_BASE_API]: '/api'
推荐阅读
- python - python将列表值发送到postgres
- javascript - 带有等待函数的无限while循环只执行一次
- postgresql - Postgres 连接模式
- privacy - 改组作为公共数据的匿名化技术
- excel - 数据输入后更新 Internet Explorer 窗口
- mysql - sql 'str_to_date' 函数错误截断了不正确的日期值并且不显示正确的时间格式
- java - Spark 错误 - 无法将 SerializedLambda 的实例分配给 FlatMapFunction 类型的字段 javaRDDlike
- javascript - HTML 和 JavaScript 中的表单
- python - Ray 在大型(isch)数据集上的低延迟响应
- sql - 给定部分孩子组,PSQL 获取其他孩子