【React 全家桶】脚手架配置代理的两种方法——解决 React 跨域问题

一、通过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与大家分享，一起进步，加油。