axios跨域php后台配置,解决react项目中跨域和axios封装使用

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

1、请求跨域问题

2、如何发起请求

3、axios的简单封装

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

npminstall -gcreate-react-app

然后创建react项目

create-react-app xxx项目名

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

安装 npm install

运行 npm start

首先我们解决跨域的问题

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

如果你赖一点可以这样写

5235db7cb32cf33b34dda43ee633fe63.png

完整写法

2abc5b6f2a49faef734e6a141d8b4cc4.png

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

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

首先安装axios

npm install axios --save-dev

方法一:

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

4df69f7f489bbbd73d732196aab39cd1.png

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

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

195b0e13222bc2cce9a32d0b5285c966.png

打开浏览器查看返回结果

f14bdee25b852ff9c8d56b3c2d7b0b41.png

方法二:

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

2d6f82ef16b02d961e8fb6b311cc5ead.png

组件中使用

b7ef529ac2de3b512f2a8907e93f3c75.png

浏览器结果

304de84adf266d97ce29ceb9208cb181.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值