react项目http-proxy-middleware跨域问题

1.npm安装这两个依赖

        npm install http-proxy-middleware,

        npm install axios 

2.src下新建文件setupProxy.js配置跨域信息

// 配置跨域
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        "/devApi",
        createProxyMiddleware({
            target: http://xxxxxxxxx,  // 服务器请求地址
            changeOrigin: true,      //允许跨域
            pathRewrite: {
                "/devApi": '',       //替换为空，根据自己项目地址，我这里为空
            }
        })
    );

};

       注意一下问题：

       1.修改consfig文件夹下paths.js文件 proxySetup的路径指向我们新建的文件: setupProxy.js

        2.这里和大家探讨一下setupProxy.js内容，欢迎留言评论

                devApi是拦截器里的baseURL 地址拼接上请求接口+浏览器地址 http://localhost:3000/devApi/login/              

                1.匹配找到devApi 后去做代理 http://xxxxxxxx

                2.pathRewrite 讲dveApi 替换成 空内容 /devApi/login/ => /login/

                3.替换成之后地址为 http://xxxxxxx/login/

        这里给出拦截器request.js文件代码

import axios from "axios" // 引入 axios
// 1、创建实例
const service = axios.create({
    baseURL: "/devApi", //不同环境下读取文件变量值
    timeout: 3000,
    headers: { 'X-Custom-Header': 'foobar' }
});

//2、请求拦截 // 添加请求拦截器
......
// 3、响应拦截 // 添加响应拦截器
......
http://www.axios-js.com/zh-cn/docs/ axios官网地址

        api接口给请求代码 

//api 请求处理
import service from "../utils/request"; //引入拦截器

// 配置登录接口请求
export function Login(data) {
    return service.request({
        url: "/login/",
        method: "post",
        data: data,  //post请求
    })
}

 到此我们就可以做正常的数据请求了，在需要的地方调用接口，就可正常的传递参数了，有什么问题留言评论哦，喜欢的一键三连！！！