为什么在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 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选项不正确。

1. 您将请求发送到pathRewrite
2. 请求转到Vue开发服务器（/dev-api/blog/lastBlogs）
3. 代理将localhost:8001转换为/dev-api = http://localhost:8080/blog/dev-api
4. http://localhost:8080/blog/dev-api/blog/lastBlogs应用于URL的整个路径部分-pathRewrite-RegEx /blog/dev-api/blog/lastBlogs不匹配

尝试将^/dev-api更改为pathRewrite