React Axios 跨域访问一个或多个域名问题
React Axios 跨域访问一个或多个域名问题是前端开发中的一种常见问题，该问题的解决方法有多种，本文将详细介绍 React Axios 跨域访问一个或多个域名问题的解决方法。
React Axios 跨域访问一个域名
我们可以使用在 package.json 文件中配置 proxy 来实现跨域访问。例如：
"proxy": "http://iot-demo-web-dev.autel.com"
这样，我们就可以在 React 项目中使用 Axios 发送请求到该域名下。
在使用 Axios 时，我们需要在 src 目录下创建一个 api 文件夹，并在其中创建一个 user.js 文件。在 user.js 文件中，我们可以使用 Axios 发送 GET 请求来获取数据。
import axios from 'axios'
export function _user(data) {
return axios.get('device/detail', data)
}
在需要发送请求的地方，我们可以使用import语句来引入_user函数，并在 componentDidMount 生命周期钩子函数中使用该函数发送请求。
import { _user } from '../api/user'
componentDidMount() {
let res = _user({})
console.log(res)
}
这样，我们就可以愉快地获得后台给我们的数据了。
React Axios 跨域访问多个域名
如果后台给我们两个甚至三个不同的域名，我们需要使用插件来实现跨域访问。在这里，我们使用 http-proxy-middleware 插件来实现跨域访问。
我们需要安装 http-proxy-middleware 插件：
npm install --save http-proxy-middleware
然后，我们需要配置 setupProxy.js 文件。在 setupProxy.js 文件中，我们可以使用 createProxyMiddleware 函数来创建代理中间件。
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
createProxyMiddleware('/api', {
target: 'http://iot-demo-web-server-dev.autel.com',
changeOrigin: true,
}),
)
app.use(
'/sys',
createProxyMiddleware({
target: 'http://localhost:5001',
changeOrigin: true,
}),
)
}
在 strat.js 文件中，我们需要引入 setupProxy.js 文件，并将其作为中间件使用。
require('../src/setupProxy')(devServer)
这样，我们就可以实现跨域访问多个域名了。需要注意的是，在发送请求时，我们需要在具体的路径前面加上 api 或 sys。
React Axios 跨域访问一个或多个域名问题可以通过配置 proxy 或使用 http-proxy-middleware 插件来实现。通过这篇文章，我们可以了解到如何使用 Axios 实现跨域访问，并且解决了多个域名的问题。
