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

我们在开发时候，如果前后端不在同域下，即前后端分离，就会产生跨域的情况！

将来在发布的时候，在生产环境下，大概会有两种情况：

1. 前后端不在同域下（JSONP，CORS，今天不讲）
2. 前后端在同域下

我们今天要讲的是第二种情况，前后端在同域下，而开发时，不在同域下！

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 上

其实就是这么简单！

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