Webpack devserver代理,如何避免401错误?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack devserver代理,如何避免401错误?相关的知识,希望对你有一定的参考价值。

我正面临着一个我不知道如何解决的问题。我有一个项目,我使用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)

代码工作正常,但当我尝试使用以下url重新加载页面时:

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

我可以通过主页面上的链接打开此页面。但是服务器不会重新加载页面,我有401错误。我无法重新加载页面。不知道为什么......自从我实现代理配置以来发生了这个错误。以前,我没有代理,我可以加载/重新加载每一页。

我不明白为什么我不能重新加载这个特定的页面/网址。

这是我尝试重新加载第二个URL时的确切错误消息:enter image description here

enter image description here

enter image description here enter image description here

答案

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

以上是关于Webpack devserver代理,如何避免401错误?的主要内容,如果未能解决你的问题,请参考以下文章

Webpack devserver 代理无法解决 CORS 问题

webpack devServer代理跨域get请求成功,post请求失败403 Forbidden

Webpack 配置 proxy 代理解决跨域问题

前端代码中的代理

webpack配置反向代理

webpack devServer配置项的坑