axios实现跨域 react

2018-09-06 20:32:00 weixin_30376163 阅读数 292

1.安装npm install axios

2.在package.json下添加

"proxy": {
"/app": {
"target": "http://open.douyucdn.cn",
"changeOrigin": true
}
}

3新增一个http.js文件
import axios from 'axios';

axios.defaults.baseURL = 'http://open.douyucdn.cn';
axios.defaults.withCredentials = true;
axios.defaults.timeout = 100000;

let http = {
post:'',
get:''
};

http.post = function (api ,data) {
let params =JSON.stringify(data);
return new Promise((resolve,reject) =>{
axios.post(api, params).then(res=>{
resolve(res);
})
})
};

http.get = function (api ,data) {
let params =JSON.stringify(data);
return new Promise((resolve,reject) =>{
axios.get(api, params).then(res=>{
resolve(res);
})
})
};

export default http;

4.进行数据请求
import React,{Component} from 'react';
import http from '../../libs/http'

class Footer extends React.Component{
async getStudentList(){
const res = await http.post('/app/mobile/login/',{name:'boonook',passworld:'123456'});
console.log(res);
}
componentDidMount(){
this.getStudentList();
}
render(){
return(
<div>axios封装</div>
)
}
}

export default Footer;




转载于:https://www.cnblogs.com/boonook/p/9600777.html

2018-08-05 13:17:36 wangyadong317 阅读数 14233

最近在学习react中,使用axios发送post请求,后台一直获取不到数据,十分困扰,百度下react 跨域或者react 跨域设置,得到的答案五花八门,有的说要配置web-package的tableProxy ,有的说要用fetch 也有人说要用axios ,当然这都是对的,但是这里有个误区,为什么有的fetch可以,有的axios可以,而且根本不需要react 或者vue额外的配置。

 

首先:我们在后台程序中设置的跨域,采用的是过滤器Filter ,设置如下:

按照以往的经验,采用ajax发送异步请求,然后dataType=jsonp即可,可是这次因为使用的react,当然也可以使用ajax,既然已经使用了react,有就是ES6,那么就不要用以往的老办法了,但是很困扰我。后台可以接受到请求,但是就是没有数据,怎么办,思索中,

这个时候我注意到一个细节,什么?参数不是在Http Header中,payload又是什么鬼,于是我查了下payload是何方神圣,

所谓的payload,http协议中Content-type为application/x-www-form-urlencoded,这个application/x-www-form-urlencoded会将参数绑定到请求体之中,所以我们必须在后台中指定在请求体中,获取参数,而java中sringMvc采用的@RequestBody注解,但是后台报错,不过这个报错却给我了很多提示非常有用,

提示不支持application/x-www-form-urlencoded方式,那么就好办了,那你支持什么格式,text/plan ?显然也不是,那么久只有试一试appliation/json了,不过还是报错,不过没关系在后面加上;charset=UTF-8 就可以了

所以说react或者vue这种前端框架,在跨域的问题不需要做任何额外的配置,这也让想起了,之前在喝前端联调的时候,使用postMan发送请求的时候,为什么都采用raw的格式,很可能就是其它的格式不支持啊。时间有限,文笔有限,请多体谅

 

 

2019-03-12 21:30:15 fenglangwangyi 阅读数 378

最新几天学了一下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导出去,如下

组件中使用

浏览器结果

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

2018-07-01 23:52:00 angliliu2521 阅读数 71

周末又是补充知识点的时候了,用了react axios 跨越问题,貌似是要比vue 稍微麻烦一点

它请求http好像是没有问题的,但是https还是有跨域问题的,

我用的刚好是create-react-app 这个搭建的react 项目,你必须要确保 运行了npm run eject,


    把你的webpack暴露出来,好了接着在 package.json 配置下面这段话:

    当然是在末尾加入就行了

 "proxy": {
    "/*": {
      "target": "https://douban.uieee.com",
      "changeOrigin": true
    }
  }

这样还没有解决跨越问题,还必须在axios 文件创建请求判断:

import axios from 'axios'
let baseUrl = 'https://douban.uieee.com';

if (process.env.NODE_ENV === 'development') {
    baseUrl = 'http://localhost:3000';
} else {
   // baseUrl = 'http://localhost:3000';
}
// export const baseUrl = 'http://localhost:3000';
let $axios = axios.create({
    baseURL: baseUrl + '/v2/movie',
    timeout: 10000,
    responseType: 'json',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
    }
});

我是结合Promise 请求数据的这样你就可以在解决跨区问题了,正式环境就配置正式的环境。

好了 ,7月了, 希望7月对我好点,继续加油!   

 

转载于:https://www.cnblogs.com/yf-html/p/9251895.html

2019-06-19 23:00:52 qq_41287423 阅读数 4882

React通过axios请求数据

一、全局安装axios:
npm install axios
二、创建axios.js文件(配置了过滤器,请求响应)

import Axios from 'axios'
import {Component} from 'react'
Component.prototype.$axios=Axios //将axios挂载到Component上,以供全局使用

//配置过滤器请求响应(通过查npm官网,axios文档)
Axios.interceptors.response.use(function (response) {
    return response.data;//只获取data数据
  }, function (error) {
    return Promise.reject(error);
  });

并在index.js中引入,import ‘相对路径/axios’

三、若出现跨域:
①最简单直接的方法:
在package.json中,直接配置:“proxy”:“http://47.95.207.1:8080”,
缺点:只能设置一个跨域,多个跨域不可取
②在config —> webpackDevServer.config.js中,找到proxy进行配置:

//设置跨域小暗号:/hehe
 proxy:{
      '/hehe':{
        target:'http://47.95.207.1:8080',
        changeOrigin:true,
        pathRewrite:{'^/hehe':''}
      }
    },

四、在组件中请求数据:

 componentDidMount(){
        //请求api:  http://47.95.207.1:8080/api/getHome  跨域小暗号:/hehe
        this.$axios.get('/hehe/api/getHome')
        .then((res)=>{
            console.log(res)
        })
        .catch((err)=>{
            console.log(err)
        })
    }