react axios 跨域访问一个或多个域名问题

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 实现跨域访问，并且解决了多个域名的问题。