一、通过Axios向服务器发送请求
这里假设有后端接口，我就不放了
axios是通过promise实现对ajax技术的一种封装,实现网页的局部数据刷新
1、安装Axios第三方库：npm install axios
2、在component文件夹下新建AxiosDemo文件夹，里面包含一个index.jsx文件（用于编写模拟Ajax请求）
/*AxiosDemo/index.jsx*/
import React, {
Component } from 'react';
//引入axios库
import axios from 'axios';
export default class Axios extends Component {
handleRequest = () => {
axios.get('http://localhost:5000/students').then(res => {
console.log('学生数据', res)
}, err => {
console.log('出错了', err)
})
}
render() {
return (<div>
<button onClick={
this.handleRequest}>点击请求接口</button>
</div>);
}
}
3、在App.jsx中引入AxiosDemo组件
/*App.jsx*/
import React, {
Component } from 'react';
import AxiosDemo from './components/AxiosDemo';
export default class APP extends Component {
render() {
return (
<div id="root">
<AxiosDemo />
</div>
);
}
}
4、打开终端，输入npm start 运行项目
5、打开控制台，点击按钮，发现控制台报错。
错误的问题在于浏览器进行了跨域请求。
二、如何解决跨域（配置代理）——方法（单个服务器）
第一步：在package.json文件中配置proxy属性：目标服务器地址
第二步：修改Axios请求的地址为localhost:3000（原因是客户端需要通过代理去请求，但是代理的端口号是3000，所以客户端需要向端口为3000的代理进行请求）
第三步：点击按钮请求接口，查看浏览器控制台输出结果
请求成功！
注意：该方式存在局限性。代理首先查找前端项目，如果前端项目中有这个文件，那就获取前端的数据，不会找服务器要；如果前端项目中没有这个文件，那就会向localhost:5000这个服务器进行请求。但是如果客户端需要请求的数据来自不同的服务器，那就没办法请求多个服务器的接口了。
三、如何解决跨域（配置代理）——方法二（多个服务器）
1、在src文件夹下新建 setupProxy.js 文件，用于配置一个或多个代理
这里要注意，要引入createProxyMiddleware 而不是proxy，否则会有问题
/*setupProxy.js*/
//http-proxy-middleware不需要手动引入，在搭建脚手架的时候已经自动引入了
const {
createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
createProxyMiddleware('/api1', {
//遇见/api1前缀的请求，就会触发该代理
target: 'http://localhost:5000',//请求发给谁
changeOrigin: true,//控制服务器收到的请求头中Host的值
pathRewrite: {
'^/api1': '' }//重写请求路径
}),
createProxyMiddleware('/api2', {
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite: {
'^/api2': '' }
})
)
}
changeOrigin:true 指的是当客户端给服务器发送请求的时候，服务端接收到的是与服务端相同的地址
changeOrigin:false 指的是当客户端给服务器发送请求的时候，服务端接收到的是与服务端不相同的地址，但是也不会报错
2、然后在请求的接口地址中添加响应的代理标识（’’/api1或者/api2"）
3、点击按钮进行请求，查看浏览器控制台输出结果
请求成功！！！
以上就是脚手架配置代理的两种方法——解决 React 跨域问题的内容，请关注《React 全家桶》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。