react脚手架(create-react-app)安装与代理proxy设置

╰+哭是因爲堅強的太久メ 2021-09-17 02:22 820阅读 0赞

# 安装 #

create-react-app脚手架由Facebook官方团队开发，主要是整合了如webpack等依赖包，因而无需每次都从零开始搭建react项目。该脚手架安装起来也非常方便，安装命令如下：

# 全局安装"create-react-app"架构
    $ npm install -g create-react-app
    
    # 创建脚手架项目
    $ create-react-app my-app
    
    # 进入项目目录
    $ cd my-app
    
    # 启动项目
    $ npm start

启动后，会在开发环境下启动一个服务器，监听在3000端口，它会主动给你打开浏览器的，可以立刻就看到这个app的效果，如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70][]

如果恰好3000端口已被占用，可以修改package.json中的 start 来更改访问端口：

"start": "set PORT=8081 && react-scripts start"

为了与vue脚骨架的启动命令一样，个人习惯把 start 修改为：

"dev": "set PORT=8081 && react-scripts start"

启动命令则需更改为：

$ npm run dev

# 服务代理 #

如果前后端分离各自独立开发，往往需要访问后台API来获取数据，当两者不在同一域名下时，前端访问便会跨域造成请求失败。create-react-app支持服务代理实现跨域请求API。只需在pageage.json中加入"proxy" 即可，如当跨域访问API地址为www.helloui.net时，配置如下：

{
    	"name": "my-app",
    	"version": "0.1.0",
    	"private": true,
    	"dependencies": {
    		"axios": "^0.18.0",
    		"react": "^16.6.3",
    		"react-dom": "^16.6.3",
    		"react-scripts": "2.1.1"
    	},
    	"scripts": {
    		"dev": "set PORT=8081 && react-scripts start",
    		"build": "react-scripts build",
    		"test": "react-scripts test",
    		"eject": "react-scripts eject"
    	},
    	"eslintConfig": {
    		"extends": "react-app"
    	},
    	"proxy": "http://helloui.net",
    	"browserslist": [
    		">0.2%",
    		"not dead",
    		"not ie <= 11",
    		"not op_mini all"
    	]
    }

使用axios模拟请求：

import React, {Component} from 'react';
    import './App.css';
    import axios from "axios";
    
    class App extends Component {
    	constructor(props) {
    		super(props);
    		this.state = {};
    		this.proxyRequest = this.proxyRequest.bind(this);
    	}
    
    	proxyRequest() {
    		axios({
    			method: 'get',
    			url: "/process_get?name=123"
    		}).then((resp) => {
    			console.log(resp);
    		}, (err) => {
    			console.log(err);
    		});
    	}
    
    	render() {
    		return(
    			<div>
          			    <button onClick={this.proxyRequest}>服务代理请求</button>
          		        </div>
    		);
    	}
    }
    
    export default App;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70 1][]

使用代理后发现请求的地址依旧是http://localhost:8081，但实际的数据来源于代理配置域名[http://helloui.net][http_helloui.net] 的服务。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70]: /images/20210813/6161420373b8453fb1b99d210afef9ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70 1]: /images/20210813/0224467204e94b40ab8dced1fc62cbad.png
[http_helloui.net]: http://helloui.net