如何解决为什么在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'
})
}
<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“:” ABABABABAB“,” blogCreated“:” 2020-09-20T10:44:01“,” blogStatus“:0:0,{” id“:2,” blogUser“:1,” blogTitle“ :“ test2”,“ blogDescription”:“用于测试”,“ blogContent”:“ BABABABABA”,“ blogCreated”:“ 2020-08-20T10:44:01”,“ blogStatus”:0}]}
我该怎么办?谢谢。
解决方法
因此,您正在配置Vue CLI开发服务器(在端口8001上运行),以将对/api
的所有请求代理到http://localhost:8080/blog/api
(服务器),但同时将Axios配置为使用{{1} } ...这意味着Axios会将所有请求直接发送到您的服务器而不是代理...
只需从Axios配置中删除该baseURL: process.env.VUE_APP_API_ADDRESS
我还认为您在代理配置中的baseURL: process.env.VUE_APP_API_ADDRESS
选项不正确。
- 您将请求发送到
pathRewrite
- 请求转到Vue开发服务器(
/dev-api/blog/lastBlogs
) - 代理将
localhost:8001
转换为/dev-api
=http://localhost:8080/blog/dev-api
-
http://localhost:8080/blog/dev-api/blog/lastBlogs
应用于URL的整个路径部分-pathRewrite
-RegEx/blog/dev-api/blog/lastBlogs
不匹配
尝试将^/dev-api
更改为pathRewrite
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。