持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

前言

前面学习完了一个小项目，都是纯前端项目，没有进行后端的数据操作。React本身只关注界面，并不包含ajax数据请求的功能，所以要第三方库来发起http请求。

axios

主流的http请求库，Vue脚手架里面也是用的是这个，是一个基于Promise 用于浏览器和 node.js 的 HTTP 客户端。简单的理解就是ajax的封装 axios特点：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求(可以用在node.js项目中使用)
支持 Promise API
拦截，转换，取消请求和响应
自动转换JSON数据
客户端支持防止 CSRF/XSRF

准备服务端代码

准备使用我之前文章中学习Vue时候做的一个golang服务器。发现还是从零开始比较好，直接在同级目录启动创建一个Gin框架：

这个框架也非常简单，单文件就可以启动，下载golang，配置golang可以参考：# 从零开始摸索VUE，配合Golang搭建导航网站（八.基于Golang的Gin框架的介绍）

创建一个gin_service文件夹，在该文件夹下新增一个main.go的文件，同时要设置跨语中间件，输入一下内容：

package main

import (
	"log"
	"net/http"

	"github.com/gin-gonic/gin"
)

func Cors() gin.HandlerFunc {
	return func(c *gin.Context) {
		method := c.Request.Method
		origin := c.Request.Header.Get("Origin") //请求头部
		if origin != "" {
			//接收客户端发送的origin
			//Access-Control-Allow-Origin是必须的,他的值要么是请求Origin字段的值,要么是一个*, 表示接受任意域名的请求
			c.Writer.Header().Set("Access-Control-Allow-Origin", origin)
			//服务器支持的所有跨域请求的方法
			c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE,UPDATE")
			//允许跨域设置可以返回其他子段，可以自定义字段
			c.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token, session")
			// 允许浏览器（客户端）可以解析的头部 （重要）
			c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers")

			c.Header("Access-Control-Allow-Credentials", "true")
		}

		//允许类型校验
		if method == "OPTIONS" {
			c.JSON(http.StatusOK, "ok!")
		}

		defer func() {
			if err := recover(); err != nil {
				log.Printf("Panic info is: %v", err)
			}
		}()

		c.Next()
	}
}

func main() {
	r := gin.Default()
	r.Use(Cors()) //开启中间件 允许使用跨域请求
	r.GET("/api/ping", func(c *gin.Context) {
		c.JSON(200, gin.H{
			"message": "pong",
		})
	})
	r.Run()
}

然后命令行命令：go mod init main 和go mod tidy，初始化项目。下载依赖。现在就可以直接启动了：``

安装Chrome插件

在浏览器直接get请求后端接口json数据，内容较多非常难看，使用FeHelp可以自动格式化json数据

安装之后：

安装之前：

准备前端代码

删掉之前做todoList的子组件代码安装axios库：

npm install axios

修改App.js

import React, { Component } from 'react'
import axios from 'axios'

export default class App extends Component {
	getData=()=>{
		console.log(1);
		axios.get('http://localhost:8080/api/ping').then(
			response=>{console.log(response.data)},
				error=>{console.log(error)}
			)
	}

	render() {
		return (
			<div className="todo-container">
				<button onClick={this.getData}>获取数据</button>
			</div>
		)
	}
}

npm start启动项目，点击按钮出现跨域报错

跨域设置处理

如果直接这样请求后端数据浏览器处于安全策略会直接报错，浏览器不允许在A网站直接访问B网站的数据，要在脚手架里面设置一个代理服务器。

在src下新建一个setupProxy.js:

const {createProxyMiddleware } = require('http-proxy-middleware');
   module.exports = function(app) {
     app.use(
        createProxyMiddleware('/api', {  //需要转发的请求前缀，这个自己自定义(所有带有/dev前缀的请求都会转发给8080)
         target: 'http://localhost:8080', //配置转发目标地址(能返回数据的服务器地址)
         changeOrigin: true, //控制服务器接收到的请求头中host字段的值
         pathRewrite: {'^/api': ''} //去掉这个自定义缀，保证交给后台服务器的是正常请求地址(必须配置)
       })
     )
   }

此时在页面请求数据是成功的：

总结

到此React使用axios然后设置代理请求后端接口完成，注意后端要设置中间件允许跨域请求的方法。下面再做一个小项目。

React 学习笔记（20）React 脚手架使用axios

前言

axios

准备服务端代码

安装Chrome插件

准备前端代码

跨域设置处理

总结