React项目配置4(如何在开发时跨域获取api请求)
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React项目配置1(如何管理项目公共js方法)---2018.01.11
2、React项目配置2(自己封装Ajax)---2018.01.12
3、React项目配置3(如何管理项目API接口)---2018.01.15
4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16
5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17
6、React项目配置6(前后端分离如何控制用户权限)---2018.01.18
7、React项目配置6(ES7的Async/Await的使用)---2018.01.19(新增)
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
我们在开发时候，如果前后端不在同域下，即前后端分离，就会产生跨域的情况！
将来在发布的时候，在生产环境下，大概会有两种情况：
-
前后端不在同域下（JSONP，CORS，今天不讲）
-
前后端在同域下
我们今天要讲的是第二种情况，前后端在同域下，而开发时，不在同域下！
1、设置chrome
在我们早期要想在开发的时候，实现跨越请求，比较简单的办法就是设置chrome，让他禁用掉浏览器跨越现限制：
就是在启动chrome之前，在他的属性的目标处设置
google-chrome-stable --disable-web-security --user-data-dir
这种方法 好像对chrome 版本也有要求：chrome49
更多知识点，有兴趣的童鞋可以百度！
2、webpack-dev-server
其实我们在第一节课的时候就已经安装了这个依赖，并且也设置了，只是没有细讲，今天我们来讲讲！
打开 config -> webpack -> webpack.dev.conf.js
看下这段代码
proxy: [
{
context: ['/api/**', '/u/**'],
target: 'http://192.168.12.11/',
secure: false
}
],
context：请求的路径
就是当你访问 http://localhost:8080/api/newList 的时候就会被命中
target：api host
命中之后，就会被转发到 http://192.168.12.11/api/newList 上
其实就是这么简单！
背后的原理，就代理转发！我就不细讲了！有兴趣的童鞋可以百度！
本文完 
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
