vue中跨域 和 axios的封装

跨域的解决 – devServer

 devServer: {
    proxy: {
      '/api': {
        //要访问的跨域的域名
        target: 'http://10.160.36.126:8080',
        ws: true,
        secure: false, // 使用的是http协议则设置为false，https协议则设置为true
        changOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意跨域问题的产生，是本地的服务器地址与后端给定的地址的CORS问题

axios的封装

import axios from 'axios'

var instance = axios.create({
    baseURL: '/api',
    timeout: 1000,
});


export const get = ({url, params}) => {
    return instance({
        url,
        params
    })
}

export const post = ({url,headers, params, data}) => {
    return instance({
        url,
        headers,
        method: 'post',
        params,
        data
    })
}

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});




// 文件中调用的方式，可以使用async + await调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

• params中传参是放在地址栏上，get和post都可以
• query传参是get独有的，形式为?a=xx&c=xx
• data传参是post独有的，放在body体中传播

post方式的content-type要注意区分使用场景：

1. application/json 通常， 好像是默认的
2. www/url-encoded 键值对传参 通过& 连接 ，通常是表单
3. formData 貌似是传文件的

目前只总结了get和post的常用操作，后续遇到再补充