vue和react配置反向代理

最新推荐文章于 2024-11-09 03:45:38 发布

万迹

最新推荐文章于 2024-11-09 03:45:38 发布

阅读量817

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44649210/article/details/121437217

vue 同时被 2 个专栏收录

18 篇文章

订阅专栏

react

3 篇文章

订阅专栏

本文介绍如何通过配置代理实现前端应用与后端服务器之间的跨域请求处理。具体步骤包括安装http-proxy-middleware插件、配置代理中间件及在前端项目中发起正确的API请求。

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

第一步

下载插件
npm install http-proxy-middleware --save-dev

第二步

在配置文件里面加入
vue的配置文件是vue.config.js
react的配置文件为setupProxy.js

const  { createProxyMiddleware } = require("http-proxy-middleware");
module.exports=function(app){
    app.use(createProxyMiddleware(`/api`,{
        target:"http://localhost:3008",//后端服务器地址
        changeOrigin:true,
        pathRewrite: {
            "^/api": ""
          }
    }))
}

第三步

在后端调用时，以axios为例

checkStatus: (params) => {
        return axios({
            method: "get",
            url: "/api/login/qr/check",//等同于http://localhost:3008/login/qr/checl
            params
        })
    },