为什么代理 vue.config.js 404

Question

我有一个前后端分离的小项目，有开发环境和生产环境，所以想设置代理调用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},{"id":2,"blogUser":1,"blogTitle" :"test2","blogDescription":"for test","blogContent":"BABABABABA","blogCreated":"2020-08-20T10:44:01","blogStatus":0}]}

我该怎么办？谢谢。

Answer 1

因此您正在配置 Vue CLI dev-server（运行在端口 8001 上）以将对 /api 的所有请求代理到 http://localhost:8080/blog/api（服务器）但同时配置 Axios 以使用 baseURL: process.env.VUE_APP_API_ADDRESS ...这意味着 Axios 将所有请求直接发送到您的服务器而不是代理...

只需从 Axios 配置中删除 baseURL: process.env.VUE_APP_API_ADDRESS

我也认为您在代理配置中的 pathRewrite 选项不正确。

您将请求发送至 /dev-api/blog/lastBlogs
请求转到 Vue dev-server (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'

为什么代理 vue.config.js 404

Why proxy in vue.config.js 404

vue.js

vue-cli-4