解决react项目中跨域和axios封装使用

在 React 项目中使用 Axios 进行网络请求时，可能会遇到跨域问题。出现跨域问题的原因是浏览器的同源策略限制，即只允许同源网址（协议、域名、端口号均相同）之间进行通信。如果你需要访问不同源的资源，就需要进行跨域处理。

以下是一些处理跨域问题的方法：

1. 使用代理

在 React 项目中，可以通过配置代理来解决跨域问题。在 package.json 文件中添加如下代码：

"proxy": "http://api.example.com"

这里将代理地址设置为 http://api.example.com ，当发送请求时，axios 会自动将请求发送到代理地址，然后再由代理地址转发到目标地址。这样就可以避免跨域的问题。

2. 后端设置 CORS

如果你无法使用代理，或者代理无法满足你的需求，可以让后端设置 CORS（跨域资源共享）来解决跨域问题。CORS 是一种机制，它允许 Web 应用程序从不同的源访问其资源。

在后端代码中，可以添加如下代码来设置 CORS：

res.setHeader('Access-Control-Allow-Origin', '*');

这里将 Access-Control-Allow-Origin 设置为 * ，表示允许所有来源访问资源。当然，你也可以设置为特定的来源。

3. 使用 JSONP

JSONP 是一种解决跨域问题的方法，它利用了 HTML 中 script 标签可以跨域加载资源的特性。在 React 项目中，可以通过使用 jsonp 库来实现 JSONP 请求。

以下是一个使用 jsonp 库的例子：

import jsonp from 'jsonp';

jsonp('http://api.example.com', {}, (err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

这里调用了 jsonp 函数，将目标地址设置为 http://api.example.com 。jsonp 函数会自动创建一个 script 标签，加载目标地址，并在加载完成后执行回调函数。

在 React 项目中使用 Axios 进行网络请求时，可以通过对 Axios 进行封装来简化代码，并提高代码的复用性。以下是一个简单的 Axios 封装示例：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000,
});

instance.interceptors.request.use(
  (config) => {
    // 在请求发送之前做一些处理
    return config;
  },
  (error) => {
    // 对请求错误做一些处理
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  (response) => {
    // 对响应数据做一些处理
    return response.data;
  },
  (error) => {
    // 对响应错误做一些处理
    return Promise.reject(error);
  }
);

export default instance;

这里创建了一个 Axios 实例，并设置了 baseURL 和 timeout 。然后，通过拦截器对请求和响应进行处理，并最终返回处理后的数据。在其他代码中，只需要引入封装后的 Axios 实例即可进行网络请求。

import axios from './axios';

axios.get('/users').then((data) => {
  console.log(data);
});