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 上

其实就是这么简单!

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

本文分享自微信公众号 - 前端人人(frontend_everyone)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-01-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

前端:图文混排-怎么在不使用float的情况下实现想要的效果呢?

异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 举个例子 ? 重点:display:fle...

343110
来自专栏SpringBoot 核心技术

第九章:SpringBoot内置SpringMvc静态文件地址修改

35520
来自专栏前端大白专栏

关于上报错误最简单的实现方式--利用图片

18750
来自专栏哲学驱动设计

WPF Commanding Overview 的笔记

整个命令系统的流程如下: CommandManager 负责监听一些它关注的属性的更改(例如:Focus、Click),当界面上有此类事件发生时,它会通知所有...

20480
来自专栏Jerry的SAP技术分享

一种不通过UI给C4C自定义BO创建测试数据的方式

假设我在Cloud Studio里创建了如下一个非常简单的自定义BO:

24690
来自专栏代码散人

利用XCode Targets创建多scheme的iOS项目

在我们的开发iOS的时候,通常会遇到一个项目打包成多个环境的问题,也会遇到一套代码打包成多个项目的问题,最常用的做法是写一个配置文件,在打包的时候修改一下配置文...

17840
来自专栏移动端周边技术扩展

.a VS .framework VS .dylib

29150
来自专栏ytkah

navicat如何导出mysql数据表结构

我们在创建数据库时会对字段进行设置,比如类型、长度等,如果字段多的话一个个设置非常麻烦,可以从其他地方已有的表导入数据表结构,怎么操作呢?我们拿navicat导...

1.2K30
来自专栏Python疯子

iOS 之多个 button 的单选与多选

下面是实现的代码: 首先创建10个button(一个一个写太麻烦了,个人认为还是用一个 for 循环来创建比较好)

13410
来自专栏WebDeveloper

简单封装curl的get与post发送数据

42530

扫码关注云+社区

领取腾讯云代金券