Webpack devserver 代理，如何避免 401 错误？答案

【问题标题】：Webpack devserver proxy, how to avoid 401 error?Webpack devserver 代理，如何避免 401 错误？
【发布时间】：2018-09-04 09:19:24
【问题描述】：

我遇到了一个我不知道如何解决的问题。我有一个项目，前端使用 React 和 Redux，后端使用 Springboot。

前端：http://localhost:8080
后台：http://localhost:8090

Webpack 版本：

"webpack": "^4.17.2",
"webpack-cli": "^3.0.7",
"webpack-dev-server": "^3.1.7"

这是我的 webpack.config.js

const webpack = require('webpack');

module.exports = {
    entry: [
        'react-hot-loader/patch',
        './src/index.js'
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: './dist',
        hot: true,
        historyApiFallback: true,
        headers: {
            "Access-Control-Allow-Origin": '*',
            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
            "Access-Control-Allow-Headers": '*'
        },
        proxy: [{
            context: ['/oauth/**', '/flows/**', '/flow/**', '/flowDetail/**', '/flowDetails/**', '/templateDetail/**', '/templateDetails/**', '/usersUnix/**', '/userUnix/**'],
            target: 'http://localhost:8090',
            changeOrigin: true
        }],
    }
};

我通过 axios (v0.18.0) 像这样调用 url：

axios.get('/flows/search/findByUserId?userId=2&page=0&size=5', {headers: {Authorization: Bearer}})
axios.get('/flows/' + id, {headers: {Authorization: Bearer}})

代码工作正常，但是当我尝试使用以下网址重新加载页面时：

axios.get('/flows/' + id, {headers: {Authorization: Bearer}})

我可以通过主页上的链接打开这个页面。但是服务器不会重新加载页面，我有一个 401 错误。我无法重新加载页面。不知道为什么... 因为我已经实现了代理配置，所以发生了这个错误。以前，在没有代理的情况下，我能够加载/重新加载每个页面。

我不明白为什么我无法重新加载此特定页面/网址。

这是我尝试重新加载第二个 URL 时收到的确切错误消息：

【问题讨论】：

您正在收到 401，然后您的代理工作正常。授权没有通过。你能分享你得到 401 的路线的标题吗？
当然，标题看起来像这样，我将令牌存储到 getState().auth 中： var sessionState = getState().auth const Bearer = 'Bearer' + sessionState.session.access_token跨度>
你能把那个 HTTP 请求的截图贴在网络标签中吗？

标签： javascript proxy react-redux axios webpack-dev-server

【解决方案1】：

问题在于 axios {Authorization: Bearer } 标头。重新加载页面时，您没有传递标题。尝试检查授权标头是否在浏览器的网络选项卡下的标头中传递

【讨论】：