react脚手架配置代理

文章目录

• 问题描述
• • nodejs实现后端服务器
  • react脚手架构建前端项目
  • • package.json
    • App.js
• 解决办法
• • 配置代理服务器的第一种方法
  • • package.json
    • App.js
  • 配置代理服务器的第二种方法
  • • src/setupProxy.js
    • App.js

问题描述

前端发送http://localhost:5000/students请求，遇到跨域问题。

nodejs实现后端服务器

const express = require("express");

const app = express();

app.get("/students",(request,response) => {
    const students = [
        {id:"001",name:"张三"},
        {id:"002",name:"李四"},
        {id:"003",name:"王五"}
    ];

    response.send(students);
})

app.listen("5000",error => {
    if(!error) console.log("listening on port:5000");
})
           

react脚手架构建前端项目

代码涉及的主要文件有，

1. package.json
2. App.js

package.json

{
  "name": "react16_demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
           

App.js

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

export default class App extends Component {
  getStudentData = () => {
    axios.get("http://localhost:5000/students").then(
      response => {
        console.log("请求成功了",response.data);
      },
      error => {
        console.log("请求失败了",error.message);
      }
    )
  }

  render() {
    const {getStudentData} = this;
    return (
      <div>
        <button onClick={getStudentData}>获取学生数据</button>
      </div>
    )
  }
}
           

解决办法

react脚手架配置代理可解决以上跨域问题。代理配置有以下两种方式：

1. 第一种，package.json里添加proxy配置项，并将proxy值设置为目标服务器。如，

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

   。
2. 第二种，src目录下新建代理配置文件

   setupProxy.js

   ，配置内容如：

const {createProxyMiddleware} = require("http-proxy-middleware");

module.exports = function(app){
    app.use(
        createProxyMiddleware("/api",{
            target:"http://localhost:5000", 
            changeOrigin:true,
            pathRewrite:{'^/api1':''} 
        })
    )
}
           

配置代理服务器的第一种方法

代码变更涉及的文件有，

1. package.json
2. App.js

package.json

变更的部分是：添加

proxy

配置项，且

proxy

配置为目标服务器，即

localhost:5000

。

{
  "name": "react16_demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy":"http://localhost:5000"
}
           

App.js

变更部分：

axios.get("http://localhost:5000/students")

变更为

axios.get("http://localhost:3000/students")

。

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

export default class App extends Component {
  getStudentData = () => {
    axios.get("http://localhost:3000/students").then(
      response => {
        console.log("请求成功了",response.data);
      },
      error => {
        console.log("请求失败了",error.message);
      }
    )
  }

  render() {
    const {getStudentData} = this;
    return (
      <div>
        <button onClick={getStudentData}>获取学生数据</button>
      </div>
    )
  }
}
           

配置代理服务器的第二种方法

代码变更涉及的文件有，

1. src下新增代理配置文件setupProxy.js，即

   src/setupProxy.js

2. App.js

src/setupProxy.js

const {createProxyMiddleware} = require("http-proxy-middleware");

module.exports = function(app){
    app.use(
        createProxyMiddleware("/api",{
            target:"http://localhost:5000", 
            changeOrigin:true,
            pathRewrite:{'^/api':''} 
        })
    )
}
           

• target

  ，即目标服务器。

• pathRewrite

  ，即路径重写。请求路径中的字符串

  /api

  将被空字符串代替。

• changeOrigin

  。

App.js

变更部分：

axios.get("http://localhost:5000/students")

变更为

axios.get("http://localhost:3000/api/students")

。

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

export default class App extends Component {
  getStudentData = () => {
    axios.get("http://localhost:3000/api/students").then(
      response => {
        console.log("请求成功了",response.data);
      },
      error => {
        console.log("请求失败了",error.message);
      }
    )
  }

  render() {
    const {getStudentData} = this;
    return (
      <div>
        <button onClick={getStudentData}>获取学生数据</button>
      </div>
    )
  }
}