axios简单配置及解决跨域

本文详细介绍了如何通过axios创建实例,设置基础配置,包括超时和自定义请求头,并讨论了如何配置请求和响应拦截器。此外,针对跨域问题,重点讲解了Jsonp、后端CORS配置和使用代理服务器的解决策略,以及在Vue中通过vue.config.js实现跨域的示例。
摘要由CSDN通过智能技术生成
const instance = axios.create({
  baseURL: 'https://some-domain.com/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文件,简单配置如下:

 

 

 

 

  • 1
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值