react跨域封装
react跨域封装
最近一直在学习react框架，发现react其实也是用的axios请求方式，这里把axios封装，解决跨域的方法分享给大家
如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。
- 在项目中安装axios插件，npm install axios
- 在项目src下新建list.js，这里为了方便演示，用的是mockapi.js,完整地址：https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists
- list.js中代码如下
import axios from ‘axios’
import qs from ‘qs’
let baseUrl = ‘https://douban.uieee.com’;
if (process.env.NODE_ENV === ‘development’) {
baseUrl = ‘http://localhost:3000’;
} else {
// baseUrl = ‘http://localhost:3000’;
}
axios.defaults.timeout = 50000;
axios.defaults.baseURL = baseUrl;
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded; charset=UTF-8’;
axios.defaults.withCredentials = true;
let http = {
post: “”,
get: “”
};
http.post = function (api, data) {
let params = qs.stringify(data);
return new Promise((resolve, reject) => {
axios.post(api, params).then((res) => {
resolve(res)
}).catch(err => {
reject(err)
})
})
};
http.get = function (api, data) {
let params = qs.stringify(data);
return new Promise((resolve, reject) => {
axios.get(api, params).then((res) => {
resolve(res);
}).catch(err => {
reject(err)
})
})
};
export default http
4. 找到项目的package.json,插入下列代码
“proxy”: “https://5b5e71c98e9f160014b88cc9.mockapi.io/api/”,
6. 请求：在你的组件中如下请求
import http from ‘…/list’
http.get(’/v1/lists’).then((res) => {
console.log(res)
})
8. 数据就出来啦；