解决react项目中跨域和axios封装使用
最新几天学了一下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封装使用的更多相关文章
- React项目中跨域问题的解决方案
刚刚找到到通过creat-react-app创建的项目中跨域问题的解决方案,记录下来以备后用. 如果接口地址为: http://my.example.com/eg-api 则配置package ...
- Vue项目中跨域问题解决
后台更改header 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) Jquery jsonp 一.后台更改header header('Access-C ...
- Vue项目中跨域的几种方式
经常使用vue + webpack搭建项目,但在请求某些json数据时存在跨域问题,此时有几种修改方法 1. 修改后台header, 但如果只是请求外部数据,是没法修改后台配置的 header('Ac ...
- CSS Modules 解决 react 项目 css 样式互相影响的问题
1. CSS Modules引入目的 写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去. 另外,每 ...
- react项目跨域问题
在用知乎写demo的时候碰到了跨域问题 解决跨域如下: 跨域代理解决 "proxy":"https://news-at.zhihu.com", 请求的时候, ...
- 解决vue-cli项目开发中跨域问题
一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问 ...
- 解决React前端在开发环境的跨域问题
在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用Nginx来处理,那么,在本地开发环境又该如何处理呢? React框架里处理跨域问题,可以使用ht ...
- 【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命令自己安装 ...
- vue项目搭建 (二) axios 封装篇
vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...
随机推荐
- java数据结构1--数组、排序和Arrays工具类
数组:Array 数组的定义 数组的内存结构 数组定义常见问题 数组常见操作 Java参数传递问题--值传递 二维数组 1.数组概念 同一种类型数据的集合,可以是基本数据类型,也可以是引用数据类型. ...
- 'gbk' codec can't decode byte 0xad in position 12: illegal multibyte sequence
原文链接:https://blog.csdn.net/shijing_0214/article/details/51971734 使用python的时候,经常会遇到文本编码的问题,其中最常见的就是“' ...
- NOIP2016提高A组五校联考4总结
坑爹的第一题,我居然想了足足3个小时,而且还不确定是否正确. 于是,我就在这种情况下心惊胆跳的打了,好在ac了,否则就爆零了. 第二题,树形dp,本来差点就想到了正解,结果时间不够,没打完. 第三题, ...
- jvm——CodeCache
https://juejin.im/post/5c890f21f265da2d993dc692 CodeCache是热点代码的暂存区,经过即时编译器编译的代码会放在这里,它存在于堆外内存.除了JIT编 ...
- 爬虫之Handler处理器和自定义Opener
一.Handler处理器和自定义Opener opener是 request.OpenerDirector 的实例,我们之前一直都在使用的urlopen,它是一个特殊的opener(也就是模块帮我们构 ...
- php7魔术方法
抽空把php7的魔术方法复习一下,大致如下 __constract:在实例化一个类时,触发 __destruct:在一个实例对象被销毁的时候触发 __set(string $name , mixed ...
- 如何修改 tomcat 端口号?
一.tomcat默认端口 tomcat默认的端口是8080,还会占用8005,8009和8443端口.如果已经启动了tomcat,再启动另一个tomcat就会发现 这些端口已经被占用了,这个时候就需要 ...
- 题解 CF1190B 【Tokitsukaze, CSL and Stone Game】
思路: 首先题目告诉我们,一次只能删去一个石子.当然有翻译时会注意,但是看英文题时总是容易忽略.. 先排序. 然后,你会发现,有些情况是一开始就输的,具体情况如下: 有两个 两个相等非零数.(a[x] ...
- [CSP-S模拟测试]:新的世界(BFS)
题目背景 小学五六年级的乔猫是一个喜欢不务正业写游戏的孩纸$......$他曾经模仿著名的沙盒游戏<$Minecraft$>做过一个自己的游戏$"NEWorld"$.这 ...
- 配置kubernetes.client的参数遇到的坑
配置kubernetes.client遇到的一些坑: 一,job-name不能重名,如果job-name已经有了,再创建job,则会发生冲突cliflict 这样将会报以下错误:Reason : Co ...