为什么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.production：
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：
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“，"blogContent":"ABABABABAB"，"blogCreated":"2020-09-20T10:44:01"，"blogStatus":0}，{id:2，"blogUser":1，"blogTitle":"test2"，“blogDescription”：“用于测试”，"blogContent":"BABABABABA"，"blogCreated":"2020-08-20T10:44:01"，“blogStatus”：0}
我该怎么办？谢谢。
回答 1
Stack Overflow用户
发布于 2020-10-08 08:39:45
因此，您正在配置Vue CLI server (运行在端口8001上)将所有请求代理到/api到http://localhost:8080/blog/api (服务器)，但同时配置Axios以使用baseURL: process.env.VUE_APP_API_ADDRESS ...which意味着Axios将所有请求直接发送到您的服务器，而不是代理.
只需从Axios配置中删除该baseURL: process.env.VUE_APP_API_ADDRESS即可。
我还认为代理配置中的pathRewrite选项是不正确的。
将请求发送给/dev-api/blog/lastBlogs
- Request的
- 转到Vue dev-server，(
localhost:8001) - Proxy将
/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将不匹配
G 224
尝试将pathRewrite转换为[process.env.VUE_APP_BASE_API]: '/api'
https://stackoverflow.com/questions/64257135
复制相似问题
腾讯云开发者
