React Proxy跨域配置（纯代码-可直接拉取使用）

目录

一、src目录下创建setupProxy.js文件

二、util目录下面创建request文件

三、src下创建api文件夹并创建loginRegister.js文件

四、目标文件下使用函数调用接口

---

一、src目录下创建setupProxy.js文件

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
	app.use(
		createProxyMiddleware('/devApi', {
		    target: 'http://www.web-jshtml.cn/api/react',
		    changeOrigin: true,
		    pathRewrite: { '^/devApi': '' },
		})
	);
};

二、util目录下面创建request文件

import axios from 'axios';

// 1、创建实例
const service = axios.create({
	baseURL: 'devApi',
	timeout: 1000,
	// headers: {'X-Custom-Header': 'foobar'}
});

// 2、请求拦截
service.interceptors.request.use(
	function (config) {
		// 在发送请求之前做些什么
		return config;
	},
	function (error) {
		// 对请求错误做些什么
		return Promise.reject(error);
	}
);

// 3、响应拦截
service.interceptors.response.use(
	function (response) {
		// 对响应数据做点什么
		return response;
	},
	function (error) {
		// 对响应错误做点什么
		return Promise.reject(error);
	}
);

export default service;

三、src下创建api文件夹并创建loginRegister.js文件

import service from '../../src/utils/request';

export function LoginApi(data) {
    return service.request({
        url: '/login/',
        method: 'post',
        data, // 请求为post时
        // params:data // 请求为get时
    });
}

四、目标文件下使用函数调用接口

LoginApi(params)
    .then((response) => {
	    console.log('Success===========:', params);
	})
	.catch((error) => {
	    console.log('Fail+++++++++++++:', params);
	});

参考地址：axios中文网|axios API 中文文档 | axios