axios配置遇到的坑

Posted on Edited on In Symbols count in article: 1.5k Reading time ≈ 1 mins.

其实是包括vue和服务端（例如php+nginx）的配置总结

1. 首先是axios安装

1
npm install axios

简单就安装好了
不过可能网速慢可以用淘宝源，不知道的自行百度

2. 然后是vue中引入

1
import axios from 'axios'

就可以直接用axios的方法了
axios使用参考：
某中文axios说明
npm库axios官网说明

3. 接下来是重点的坑

1. 首先是vue2中使用axios

  1. 简单使用在每个.vue或者.js文件都用上

    1
    import axios from 'axios'

  2. 然后还可以更改vue的原型链：

    1
    2
    import axios from 'axios'
    Vue.prototype.axios = axios

    在main.js中new Vue前写入
    此后在其他组件中可直接使用this.axios代替正常的axios使用。

  3. 补充另一种方法（本人未尝试，因为还未学过vuex）
    所以参见网站

2. 然后是axios跨域问题

由于本人之前一直未曾遇到跨域的使用需求也就没有使用过跨域ajax或者axios了，这次想弄前后端分离成2套系统来使用所以需要用到跨域请求。

  1. php配置

    1
    2
    3
    header('Access-Control-Allow-Origin: http://localhost:8080');
    header('Access-Control-Allow-Headers: Content-type');
    header('Access-Control-Allow-Credentials: true');

    以上第一句是允许http://localhost:8080 跨域请求此后台，
    第二句是允许跨域的某种请求头
    第三句是当该标志为真时，响应于该请求是否可以被暴露

    此外还有一句是

    1
    header('Access-Control-Allow-Methods:GET');

    get post 经过测试加不加都可以但是PUT PATCH等就需要设置了

  1. nginx配置

    nginx其实和php差不多，只是设置头的方式不同，但是经过测试nginx和php只需要设置一项即可，nginx设置主要是在后台与前端分离后后台代码改动麻烦且不易控制时则设置
    语法时这样的

    1
    add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';

  2. vue配置
    其实就是前端配置，使用vue和不使用vue都是一样的
    ajax或者axios中有一个参数是withCredentials需要设置为true
    全局设置方法是 

    1
    axios.defaults.withCredentials=true;

    在需要时使用只需类似这样

    1
    2
    3
    4
    axios.post(
    'url',
    {withCredentials:true}
    )

4. 差不多到结尾了

其实跨域主要就是了解http协议，因为浏览器的限制所以需要跨域，前面的设置也就是设置http的参数而已，所以会了http/tcp自然就很好解决了

此外在设置axios的默认参数后再在使用时再设置一次会导致出现2次请求，一次是OPTIONS的请求，网上百度说这是axios工作原理就是发起这样的请求试探服务端的允许，所以有这样一个现象，即使浏览器报错，但是照样能得到服务端返回的数据但是不能执行axios().then()中的代码而是执行.catch()中的报错。

最近想写一个前后端分离的网站所以遇到这些坑，后续应该会有许多的文章出炉哈哈，努力写博客了！！！