react配置反向代理

最新推荐文章于 2023-04-12 21:13:40 发布

妮妮雄霸天下

最新推荐文章于 2023-04-12 21:13:40 发布

阅读量189

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js

本文链接：https://blog.youkuaiyun.com/qq_60403325/article/details/120335965

react 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何在React应用中配置Axios库，包括请求和响应拦截器的使用，以及处理不同错误状态。此外，还展示了如何通过`http-proxy-middleware`设置API代理，解决跨域问题，将API请求代理到本地服务器。对于前端开发者来说，这是理解 Axios 配置和前端开发中API请求处理的重要教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios.js配置

import axios from "axios";

// axios.defaults.baseURL = process.env.REACT_APP_URL;
//请求的拦截
axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    if (window.localStorage.getItem("token")) {
        config.headers.common["token"] = window.localStorage.getItem("token")
    }
    return config;
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});
//响应的拦截
//响应头拦截
axios.interceptors.response.use(response => {
    return response;
}, error => {
    if (error.response) {
        switch (error.response.status) {
            // 返回401，清除token信息并跳转到登录页面
            case 404:
                alert("跳到错误页面");
                break;
            case 500:
                alert("接口调用错误")
                break;
        }
        // 返回接口返回的错误信息
        return Promise.reject(error.response.data);
    }
});


export default axios;

1,npm i http-proxy-middleware

2,在src里面新建一个文件setupProxy.js

3.src的目录中新建立setupProxy.js 里面写入

const   {  createProxyMiddleware  }  =  require("http-proxy-middleware");
module.exports = function (app) {
        app.use(createProxyMiddleware(`/api`, {
                target: "http://localhost:2345",
                changeOrigin: true,
                pathRewrite:  {
                        "^/api":  ""
                  }
        }))
}

那么model层