使用create-reate-app创建的项目中代理的配置

最近在写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错误.