解决react项目中跨域和axios封装使用
2024-08-26 23:12:48
最新几天学了一下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导出去,如下
组件中使用
浏览器结果
看到上面的结果,说明我们已经成功决解跨域问题并且拿到了后台返回的数据。是不是很简单,赶紧自己动手试一试吧。
最新文章
- PHP设计模式(八)桥接模式(Bridge For PHP)
- C++02.访问控制
- BonBon - 使用 CSS3 制作甜美的糖果按钮
- JNI系列——简便开发流程
- replace和replaceAll(路径反斜杠问题)
- jquery 多选框的问题
- linux命令:find
- PHP部分---字符串处理(文中例子不断更新);
- linux exec函数家族
- saas系统架构经验总结
- 页面全屏显示JS代码
- C# 操作系统回收站
- python str的一些方法
- 使用jdbc存储图片和大文本
- gitlab-ci-runner安装
- jquery.data()&;jquery.extend()
- Linux(Ubuntu)使用日记(三)------git安装使用
- B - Glider Gym - 101911B(二分)
- Docker Dockerfile指令
- Dubbo服务容错(整合hystrix)
热门文章
- flask+gevent的异步框架
- 求hack or 证明(【JZOJ 4923】 【NOIP2017提高组模拟12.17】巧克力狂欢)
- kafka伪分布式安装(2.12版)
- Java面试之持久层(10)
- java总结1
- SPOJ D-query &;&; HDU 3333 Turing Tree (线段树 &;&; 区间不相同数个数or和 &;&; 离线处理)
- GAN one-shot
- django操作cookie和session
- Mongodb副本集集群搭建
- 《Effective Java》读书笔记 - 2.创建和销毁对象