React项目配置4

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

其实我们在第一节课的时候就已经安装了这个依赖,并且也设置了,只是没有细讲,今天我们来讲讲!

看下这段代码

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 上

其实就是这么简单!

背后的原理,就代理转发!我就不细讲了!有兴趣的童鞋可以百度!

本文完

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180116G03JBC00?refer=cp_1026

相关快讯

扫码关注云+社区