react|react项目http-proxy-middleware跨域问题 antd|react|middleware|axios|ajax跨域问

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请求 }) }

【react|react项目http-proxy-middleware跨域问题】 到此我们就可以做正常的数据请求了，在需要的地方调用接口，就可正常的传递参数了，有什么问题留言评论哦，喜欢的一键三连！！！