create-react-app脚手架配置代理跨域请求接口

Posted 2022-02-14 骑着代马去流浪

React配置代理跨域访问

React版本：17.0.2

例如后端接口地址为：http://localhost:4000/manager/register

那么前端react配置如下：

1，配置setupProxy.js

在src目录下新建setupProxy.js文件，注意不能用其他文件名字，如果需要配置多个服务器接口地址，多写几个createProxyMiddleware即可

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": "" ,
    ),
    
  )

2，配置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

3，在组件中使用

const res = await http(
    url:`/manager/register`,
    method:"post",
    data
);

4，浏览器中显示的请求地址为http://localhost:5000/api/manager/register，实际请求地址为http://localhost:4000/manager/register

 注意：setupProxy.js中的/api中的api可以写成任意字符，但是要跟baseURL中的保持一致，且不能写成空字符。