github案例
一 react脚手架配置代理_方法一
需要理解的概念有:
- axios模块的安装与使用
- 什么是跨域
- 跨域的解决方案有哪些
- proxy的限制有什么
https://cra.docschina.org/docs/proxying-api-requests-in-development
测试代理服务器项目:http://qn.chinavanes.com/test_proxy_server.zip
在package.json中追加如下配置
"proxy":"http://localhost:5000"
说明:
- 优点:配置简单,前端请求资源时可以不加任何前缀。
- 缺点:不能配置多个代理。
- 工作方式:上述方式配置代理,当用Ajax请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)
src/App.js
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
render() {
// 解构赋值
return <div className='todo-container'></div>;
}
componentDidMount() {
this.getData();
}
getData = () => {
axios.get('/students').then((res) => {
console.log(res);
});
};
}
export default App;
package.json
proxy不能是数组,只能是单一代理地址,不能代理多个。
{
"name": "hello-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"nanoid": "^3.1.23",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"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"
]
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.14.2",
"@babel/preset-flow": "^7.13.13"
},
"proxy": "http://localhost:5000"
}
二 react脚手架配置代理_方法二
需要理解的概念有:
- 代理中间件的使用
-
第一步:创建代理配置文件
在src下创建配置文件:src/setupProxy.js
-
编写setupProxy.js配置具体代理规则:
const proxy = require('http-proxy-middleware') // 默认已经安装,不需要再安装 module.</