react+axios

安装:npm install axios --save-dev;

src文件下创建server.js

import axios from ‘axios‘
import qs from ‘qs‘
import { resolve } from ‘dns‘;
let http={
    post:‘‘,
    get:‘‘
}
//请求前拦截
   axios.interceptors.request.use(function (config{
      return config;
   }function (error{
      return Promise.reject(error);
  );
//数据请求回来拦截
axios.interceptors.response.use(function (response{
    return response;
  }function (error{
    return Promise.reject(error);
  });
http.post=function(api,data){
    let params=qs.stringify(data);
    return new Promise((reaolve,reject)=>{
        axios.post(api,params).then((res)=>{
            resolve(res)
        })
    })
}
http.get=function(api,data){
    let params=qs.stringify(data);
    return new Promise((reaolve,reject)=>{
        axios.post(api,params).then((res)=>{
            resolve(res)
        })
    })
}
export default http

  在组件中引入即可使用

import http from ‘./server‘

 proxy解决跨域

devServer: {
    proxy: {
      ‘/api‘: {
        target: ‘http://www.baidu.com/‘,
        pathRewrite: {‘^/api‘ : ‘‘},
        changeOrigin: true,     // target是域名的话,需要这个参数,
        secure: false,          // 设置支持https协议的代理
      },
      ‘/api2‘: {
          .....
      }
    }
  }

  参数说明

1、/api

捕获API的标志,如果API中有这个字符串,那么就开始匹配代理, 
比如API请求/api/users, 会被代理到请求 http://www.baidu.com/api/users 。

 2、target

代理的API地址,就是需要跨域的API地址。 
地址可以是域名,如:http://www.baidu.com
也可以是IP地址:http://127.0.0.1:3000
如果是域名需要额外添加一个参数changeOrigin: true,否则会代理失败。

3、pathRewrite

路径重写,也就是说会修改最终请求的API路径。 
比如访问的API路径:/api/users
设置pathRewrite: {‘^/api‘ : ‘‘},后,
最终代理访问的路径:http://www.baidu.com/users, 
这个参数的目的是给代理命名后,在访问时把命名删除掉。

4、changeOrigin:这个参数可以让target参数是域名

5、secure:

secure: false,不检查安全问题。
设置后,可以接受运行在 HTTPS 上,可以使用无效证书的后端服务器

react+axios

上一篇:获取spring中所有定义了的requestMapping信息


下一篇:android 存储