create-reate-app项目中proxy代理的配置

2018-01-06

最近在写react项目遇到了前后端交互跨域的问题，好在使用create-react-app这个脚手架【脚手架是什么？联想的建房子的时候搭建的脚手架的功能，构建一个房子的基本骨架，后续的搭建只要在这个架子下进行就好了，所以这里的脚手架的功能和现实中的类似:可以理解为脚手架是一个工具，它可以帮我们构建一个版本号为0的项目版本，这个版本中已经包含了项目开发的必要排至和结构分配，可以大大方便我们的开发】中已经包含了代理功能，
我们只要在package.json文件中添加如下配置就好了:
这里写图片描述

代码如下:

{
  "name": "myproject1",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:9090",
  "dependencies": {
    "antd": "^3.0.3",
    "fetch": "^1.1.0",
    "flux": "^3.1.3",
    "react": "^15.4.1",
    "react-addons-css-transition-group": "^15.6.2",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "reqwest": "^2.0.5"
  }
}

调用的代码:

import React from 'react';
import {Row, Col, BackTop} from 'antd';
class PCNewsDetails extends React.Component {
	constructor() {
		super();
		this.state = {
			newsItem:[
        {
          "uuid": "",
          "code": "",
          "age": 21,
          "className": "",
          "name": "",
          "major": "",
          "createTime": "",
          "editeTime":""
        }
      ]
		};
	};
	componentDidMount() {
    //this.setState({newsItem: json.object.list})
      var filter={
            object:{
              object:{
                'uuid':'11BG13AT4J4M4001'
              }
            }
          };
            var myFetchOptions = {
                       method: 'POST',
                       headers:{
                      'Content-Type':'application/json'
                      },
                      body:JSON.stringify(filter) };
        fetch("/mongo/student/selectByCondition", myFetchOptions).then(response => response.json()).then(json=>this.setState({newsItem: json.object.list}));
  };
	render() {
		return (
			<div>
				{console.log(this.state.newsItem[0].name)}
        网络请求测试.
			</div>
		);
	};
}
export default PCNewsDetails;

浅显的原理:
当浏览器检测到前端页面中发出的请求并非同域请求时，会自动请求proxy配置中的url,从而发送请求。

需要留意的坑:
注意在更改了配置文件后重启项目，因为热更新并不会更新对项目中配置文件的更改，如果不重启的话，package.json文件中的更改可能无法生效，将会报40错误.