React配置代理跨域访问
React版本:10.2
例如后端接口地址为:http://localhost:4000/manager/register
那么前端react配置如下:
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
/**
* 如果设置为'^/api': '',则发送应为http://localhost:5000/api/manager/register,服务收到为http://localhost:4000/manager/register
*/
createProxyMiddleware('/api',{
target: 'http://localhost:4000', //服务器接口地址
changeOrigin: true,
pathRewrite: { '^/api': '' },
}),
)
}
配置axios.js的baseURL
import axios from 'axios';
const http = axios.create({
baseURL: 'http://localhost:5000/api'
timeout: 5000,
withCredentials: true,
})
// 添加请求拦截器
http.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
http.interceptors.response.use(function (response) {
if(response.data.code !== 0){
alert(response.data.msg);
}else{
return response.data
}
}, function (error) {
return Promise.reject(error);
});
export default http
在组件中使用
浏览器中显示的请求地址为http://localhost:5000/api/manager/register,实际请求地址为http://localhost:4000/manager/register
注意:setupProxy.js中的/api中的api可以写成任意字符,但是要跟baseURL中的保持一致,且不能写成空字符。
文章为作者独立观点,不代表 股票程序化软件自动交易接口观点