React项目跨域，以及axios的封装使用

这篇文章距离上次修改已过229天，其中的内容可能已经有所变动。

在React项目中处理跨域问题，通常是通过CORS（Cross-Origin Resource Sharing）来解决的。如果你是在开发环境中遇到跨域问题，可以使用代理服务器来绕过跨域限制。

以下是一个简单的axios封装示例，你可以在React项目中使用：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://api.example.com', // 你的API基地址
  timeout: 1000, // 请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 可以在这里添加例如token等请求头
    // config.headers['Authorization'] = 'Your Token';
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    return response.data;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);

export default instance;

在你的React组件中，你可以这样使用封装后的axios实例：

import axiosInstance from './path/to/axiosInstance';

axiosInstance.get('/endpoint')
  .then(response => {
    // 处理响应
    console.log(response);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

如果你是在开发环境中遇到跨域问题，可以在React项目的package.json同级目录下添加react-scripts配置文件setupProxy.js，并配置代理服务器：

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

module.exports = function(app) {
  app.use(
    '/api', // 代理的路径
    createProxyMiddleware({
      target: 'http://api.example.com', // 目标服务器地址
      changeOrigin: true, // 是否改变源地址
      pathRewrite: {
        '^/api': '', // 重写路径
      },
    })
  );
};

这样配置后，所有通过/api发出的请求都会被代理到目标服务器，从而绕过本地开发环境的跨域问题。

React项目跨域，以及axios的封装使用

评论已关闭

推荐阅读