admin管理员组

文章数量:1530517

const instance = axios.create({
  baseURL: 'https://some-domain/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

1.通过创建axios实例来进行基本配置.

  baseURL指定基本路径；

  timeout设置详情响应最长时间，超过则会中断请求；

     headers可以设置请求头，请求体Content-Type即使请求体的内容类型；

     

  一般设置为:

'Content-Type': 'application/x-www-form-urlencoded'

2.配置请求拦截器

// 添加请求拦截器
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);
  });

 

 

3.跨域问题；

 跨域问题解决方案有三种，1.Jsonp; 2.后端配置cors跨域中间件；3.配置代理服务器；

  1.Jsonp通过javascript的src属性解决跨域问题，但只能处理get请求，且处理麻烦，局限性较        大不做介绍

2.后端在配置服务器时如果注册了全局中间件cors，即可解决跨越问题；

3.跨域问题的产生是因为浏览器的同源策略，不同源的访问将被拒绝，这种限制只存在于浏览器中，服务器无此限制；而使用代理服务器是解决跨域问题的原理是通过使用代理服务器直接向后台服务器拿到数据，再通过代理服务器拿到本地。

 以vue举例，在根目录新建vue.config.js文件，简单配置如下：

 

 

 

 

本文标签： 简单axios

版权声明：本文标题：axios简单配置及解决跨域 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1725724638a1038798.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。