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

安装

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的效果，如下图所示：

如果恰好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;

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