最新几天学了一下react,发现了几个问题,估计新入坑的同学们也会遇到,下面我先列出来几点

1、请求跨域问题

2、如何发起请求

3、axios的简单封装


全局安装create-react-app脚手架,帮助我们新建react项目

npm install -g create-react-app

然后创建react项目

create-react-app xxx项目名

然后安装依赖,并且运行react项目

安装 npm install

运行 npm start


首先我们解决跨域的问题

打开项目生成的package.json文件,修改文件内容如下

如果你赖一点可以这样写

完整写法

这样就可以解决跨域问题。

接下来开始讲一下如果在react中使用axios

首先安装axios

npm install axios --save-dev

方法一:

然后在我们的src目录下新建一个server.js的文件写下如下代码

然后我们就可以在react组件上使用我们的axios

随便写一个react组件,然后引进我们的刚刚封装的server.js,先写一个登录的函数,然后在组件渲染完之后执行该函数

打开浏览器查看返回结果

方法二:

我们可以先把所有的api都列出来,然后在用export导出去,如下

组件中使用

浏览器结果

看到上面的结果,说明我们已经成功决解跨域问题并且拿到了后台返回的数据。是不是很简单,赶紧自己动手试一试吧。

解决react项目中跨域和axios封装使用的更多相关文章

  1. React项目中跨域问题的解决方案

    刚刚找到到通过creat-react-app创建的项目中跨域问题的解决方案,记录下来以备后用. 如果接口地址为:    http://my.example.com/eg-api  则配置package ...

  2. Vue项目中跨域问题解决

    后台更改header 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) Jquery jsonp 一.后台更改header header('Access-C ...

  3. Vue项目中跨域的几种方式

    经常使用vue + webpack搭建项目,但在请求某些json数据时存在跨域问题,此时有几种修改方法 1. 修改后台header, 但如果只是请求外部数据,是没法修改后台配置的 header('Ac ...

  4. CSS Modules 解决 react 项目 css 样式互相影响的问题

    1. CSS Modules引入目的 写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去. 另外,每 ...

  5. react项目跨域问题

    在用知乎写demo的时候碰到了跨域问题 解决跨域如下: 跨域代理解决 "proxy":"https://news-at.zhihu.com",   请求的时候, ...

  6. 解决vue-cli项目开发中跨域问题

    一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问 ...

  7. 解决React前端在开发环境的跨域问题

    在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用Nginx来处理,那么,在本地开发环境又该如何处理呢? React框架里处理跨域问题,可以使用ht ...

  8. 【react npm】解决用npmstart启动别人的react项目的问题1:sha1-xxx checksum failed wanted sha1-xxx but got sha512-xxx. (10700 bytes)

    1.npm是nodejs的包管理器,相当于php的composer,python的pip,用于安装各种包. 2.一般来说,别人拷给你的react项目不会带依赖包的,因为太大了,需要用npm命令自己安装 ...

  9. vue项目搭建 (二) axios 封装篇

    vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...

随机推荐

  1. java数据结构1--数组、排序和Arrays工具类

    数组:Array 数组的定义 数组的内存结构 数组定义常见问题 数组常见操作 Java参数传递问题--值传递 二维数组 1.数组概念 同一种类型数据的集合,可以是基本数据类型,也可以是引用数据类型. ...

  2. 'gbk' codec can't decode byte 0xad in position 12: illegal multibyte sequence

    原文链接:https://blog.csdn.net/shijing_0214/article/details/51971734 使用python的时候,经常会遇到文本编码的问题,其中最常见的就是“' ...

  3. NOIP2016提高A组五校联考4总结

    坑爹的第一题,我居然想了足足3个小时,而且还不确定是否正确. 于是,我就在这种情况下心惊胆跳的打了,好在ac了,否则就爆零了. 第二题,树形dp,本来差点就想到了正解,结果时间不够,没打完. 第三题, ...

  4. jvm——CodeCache

    https://juejin.im/post/5c890f21f265da2d993dc692 CodeCache是热点代码的暂存区,经过即时编译器编译的代码会放在这里,它存在于堆外内存.除了JIT编 ...

  5. 爬虫之Handler处理器和自定义Opener

    一.Handler处理器和自定义Opener opener是 request.OpenerDirector 的实例,我们之前一直都在使用的urlopen,它是一个特殊的opener(也就是模块帮我们构 ...

  6. php7魔术方法

    抽空把php7的魔术方法复习一下,大致如下 __constract:在实例化一个类时,触发 __destruct:在一个实例对象被销毁的时候触发 __set(string $name , mixed ...

  7. 如何修改 tomcat 端口号?

    一.tomcat默认端口 tomcat默认的端口是8080,还会占用8005,8009和8443端口.如果已经启动了tomcat,再启动另一个tomcat就会发现 这些端口已经被占用了,这个时候就需要 ...

  8. 题解 CF1190B 【Tokitsukaze, CSL and Stone Game】

    思路: 首先题目告诉我们,一次只能删去一个石子.当然有翻译时会注意,但是看英文题时总是容易忽略.. 先排序. 然后,你会发现,有些情况是一开始就输的,具体情况如下: 有两个 两个相等非零数.(a[x] ...

  9. [CSP-S模拟测试]:新的世界(BFS)

    题目背景 小学五六年级的乔猫是一个喜欢不务正业写游戏的孩纸$......$他曾经模仿著名的沙盒游戏<$Minecraft$>做过一个自己的游戏$"NEWorld"$.这 ...

  10. 配置kubernetes.client的参数遇到的坑

    配置kubernetes.client遇到的一些坑: 一,job-name不能重名,如果job-name已经有了,再创建job,则会发生冲突cliflict 这样将会报以下错误:Reason : Co ...