React中的ajax请求和跨域问题

漂流の少年

已于 2022-01-24 16:57:18 修改

阅读量731

点赞数 1

分类专栏： React 文章标签： react.js ajax javascript

于 2022-01-24 15:54:36 首次发布

本文链接：https://blog.csdn.net/YINZHE__/article/details/122667131

版权

React 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1.ajax请求

React本身并不包含发送ajax请求的代码，需要自己引入一个第三方库
不推荐使用jQuery，因为它比较重，而且使用js操作DOM，在React中我们不推荐这样
这里推荐轻量级框架axios

npm i axios

2. 简单模拟ajax请求

①客户端 --- React

创建项目：create-react-app client

客户端页面所在地址为本机地址，端口为3000

/client/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <title>Hello</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

/client/src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'  //引入App组件

//渲染App到页面
ReactDOM.render(<App/>,document.getElementById('root'));

/client/src/App.js

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

export default class App extends Component{
  getStudentData = ()=>{
    axios.get('http://localhost:3000/api1/students').then(
      response => {console.log('成功',response.data)},
      error => {console.log('失败',error);}
    )
  }
  getCarData = ()=>{
    axios.get('http://localhost:3000/api2/cars').then(
      response => {console.log('成功',response.data)},
      error => {console.log('失败',error);}
    )
  }
  render(){
    return (
      <div>
        <button onClick={this.getStudentData}>获取学生数据</button>
        <button onClick={this.getCarData}>获取汽车数据</button>
      </div>
    )
  }
}

运行：npm start

②服务器端 --- Node + Express

在本机模拟了两台服务器，分别监听端口5000和5001，开启服务：

 node server1.js
 node server2.js

/server/server1.js

const express = require('express')
const app = express()

app.use((req,res,next)=>{
  console.log('有人请求服务器1了')
  next()
})

app.use('/students',(req,res)=>{
  const students = [
    {id:'001',name:'Tom',age:18},
    {id:'002',name:'Nancy',age:19},
    {id:'003',name:'John',age:20},
  ]
  res.send(students)
})

app.listen(5000,err=>{
  if(!err) console.log('服务器1启动成功,监听端口为5000...')
})

/server/server2.js

const express = require('express')
const app = express()

app.use((req,res,next)=>{
  console.log('有人请求服务器2了')
  next()
})

app.use('/cars',(req,res)=>{
  const cars = [
    {id:'001',name:'奔驰',price:199},
    {id:'002',name:'马自达',age:109},
    {id:'003',name:'捷达',age:120},
  ]
  res.send(cars)
})

app.listen(5001,err=>{
  if(!err) console.log('服务器2启动成功,监听端口为5001...')
})

3.解决跨域问题

①方法一

在/client/src/package.json中追加如下配置

"proxy":"http://localhost:5000"

缺点：不能配置多个代理
工作方式：按上述方式配置代理，当请求了3000端口不存在的资源时，才会将该请求转发给5000（优先匹配前端资源）

②方法二

创建代理配置文件：/client/src/setupProxy.js

PS: 我的React版本为17.0.2，不同版本的React配置可能不一样

const {createProxyMiddleware} = require('http-proxy-middleware') //这个库在初始化脚手架时就安装了，所以不用额外安装

module.exports = function(app) {
  app.use(
    createProxyMiddleware('/api1', {
      target: 'http://localhost:5000',     //配置转发目标地址
      //控制服务器接收到的请求头中host字段的值，默认为false。
      //为true,这里的host为：localhost:5000;为false,这里的host为：localhost:3000
      changeOrigin: true,
      pathRewrite: {'^/api1':''}           //修改url，去除请求前缀'/api1'
    }),
    createProxyMiddleware('/api2', {
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2':''}
    })
  )
}

优点：可以配置多个代理，可以灵活地控制请求是否走代理

4.效果演示

漂流の少年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React中的ajax请求和跨域问题

目录1.ajax请求React本身并不包含发送ajax请求的代码，需要自己引入一个第三方库不推荐使用jQuery，因为它比较重，而且使用js操作DOM，在React中我们不推荐这样这里推荐轻量级框架axiosnpm i axios2. 简单模拟ajax请求①客户端 --- React客户端页面所在地址为本机地址，端口为3000/client/public/index.html<!DOCTYPE html><html lang="en">
复制链接

扫一扫