跨域配置代理 axios 请求封装

npm insatll axios -S
1

1. 创建axios.js 文件

// vue 插件
const VueAxios = {
  vm: {},
  // eslint-disable-next-line no-unused-vars
  install (Vue, instance) {
    if (this.installed) {
      return
    }
    this.installed = true

    if (!instance) {
      // eslint-disable-next-line no-console
      console.error('You have to install axios')
      return
    }

    Vue.axios = instance
	// 挂在到 vue 原型上面
    Object.defineProperties(Vue.prototype, {
      axios: {
        get: function get () {
          return instance
        }
      },
      $http: {
        get: function get () {
          return instance
        }
      }
    })
  }
}
// 暴露出去
export {
  VueAxios
}

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

2. 创建request.js

import axios from 'axios' //注意路径
import { VueAxios } from './axios' //引入axios 挂载 可以不引入 ,注意路径

// 创建 axios 实例
const request = axios.create({
  // API 请求的默认前缀

  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 600000 // 请求超时时间
})
request.interceptors.request.use(config=> {
  console.log(config);
  //==========  所有请求之前都要执行的操作  ==============
   return config;
 }, err=> {
  //==================  错误处理  ====================
   return Promise.resolve(err);
 })
const installer = {
  vm: {},
  // eslint-disable-next-line space-before-function-paren
  install(Vue) {
    Vue.use(VueAxios, request)
  }
}
// 共享出去
export default request
export {
  installer as VueAxios,
  request as axios
}
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

3. 在main.js 引入

// 引入axios vue 插件 不用插件可以不用引入
import { VueAxios } from '@/utils/axios' //注意路径
Vue.use(VueAxios)

1
2
3
4

4.使用 在api.js 文件封装

import request from '@/utils/request' //注意路径

const userApi = {
  Login: '/register/telExists',
  Logout: '/api/user/logout/',
}
export default userApi // 暴露出去 提供使用
/**
 * login func
 * parameter: {
 *     username: '',
 *     password: '',
 *     remember_me: true,
 *     captcha: '12345'
 * }
 * @param parameter
 * @returns {*}
 * get 请求要使用 params拼接参数
 * 其他请求 使用data携带参数
 * headers 下载或许要使用请求携带token
 * responseType 接收数据使用responseType指定接收格式  arraybuffer
 */
 // post  请求 
export function login (parameter) {
  return request({
    url: userApi.Login,
    method: 'post',
    data: parameter
  })
}
//  get 请求
export function getUserList (parameter) {
  return request({
    url: userApi.user,
    method: 'get',
    params: parameter
  })
}
// 请求参数携带token 用于上传
export function uploadLicence(data) {
  return request({
    url: userApi.uploadLicence,
    method: 'post',
    headers: {
      'Authorization': 'token ' + getToken()
    },
    data
  })
}
// 接收数据流
export function EclipsePlugInDownload(data) {
  return request({
    url: userApi.EclipsePlugInDownload,
    method: 'post',
    responseType: 'arraybuffer',
    data
  })
}
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
50
51
52
53
54
55
56
57
58

---

跨域 只会发生在浏览器端，因为浏览器才有同源保护策略

解决跨域

1. vue代理
   vue2创建一个vue.config.js

module.exports = {
  devServer: {
    host:'0.0.0.0', //可以忽略不写
    port: 8080,//它是用来修改你打开后的端口号的
    open: false,//值为 true的话，项目启动时自动打开到浏览器里边， false不会打开
    proxy:{
      '/xspace': {
        target: "http://121.4.74.114:8080",
        changeOrigin: true,
        pathRewrite: {
          // '^/api' : ''
        },
        logLevel: "debug"
      }
    }
 },
}
// 配置代理 记得把请求拦截里面的base_url 取消掉，要不会不生效


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

vue代理：

1. 相当于起了一个node服务器去请求后端接口,node服务器把后端返回的数据返回给你,相当于你基于本地ip去请求,所以用了node代理请求。
   并不是你去直接请求后端，而是你去请求本地的node服务，node服务再去请求后端，所以使用了代理，就不会再出现后端接口的i 而是用代理的形式 ，表现为你去请求node服务器。
   eg: 使用/api代理192.168.10.38:8080（后端接口地址你调用接口 只需要使用你的本地ip +/代理/api（/前缀）+接口路由）
2. 因为你起项目，就是用的自己的本地ip ，axios不设置baseUrl的时候就会默认请求本地，所以你只需要写/api/+接口路由，同理在network里用了代理之后表现得请求接口地址 是你请求本地的地址+/api（/前缀）代理 。
3. vue代理只生效于开发环境 ，生产环境无效。
4. vue项目打包后会生成dist文件，代理全部失效，因为配置了代理但是失去了node服务器，请求首先是会请求本地，而且比正常接口请求多出了一个/api（/前缀）。
5. 此时为了解决跨域使用一个nginx（常用） 在nginx配置使用正则把所有的/api（/前缀）匹配出来，但凡是走了http://本机ip:设置的端口/api（/前缀）的地方全部重定向到后端接口

未使用脚手架
常用jsonp解决跨域
Jsonp其实就是一个跨域解决方案。Js跨域请求json数据是不可以的，但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。

1. 首先，因为ajax无法跨域，然后开发者就有所思考
2. 其次，开发者发现， script标签的src属性是可以跨域的把跨域服务器写成 调用本地的函数 ，回调数据回来不就好了？json刚好被js支持（object）调用跨域服务器上动态生成的js格式文件（不管是什么类型的地址，最终生成的返回值都是一段js代码）这种获取远程数据的方式看起来非常像ajax，但其实并不一样便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP。
3. 传递一个callback参数给跨域服务端，然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据即可。

简单数据
跨域服务器
文件：remote.js

localHandler({"result":"我是远程js带来的数据"});
1

本地

script type="text/javascript"> 
    var localHandler = function(data){
        alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result); 
    }; 
</script> 
<script type="text/javascript" src="跨域服务器/remote.js"></script>
1
2
3
4
5
6
7

复杂数据

跨域服务器
文件：flightResult.php
代码：

flightHandler({
    "code":"CA1998",
    "price": 1780,
    "tickets": 5
});
1
2
3
4
5

本地

<script type="text/javascript"> 
    // 得到航班信息查询结果后的回调函数 
    var flightHandler = function(data){
        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    }; 
    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码） 
    var url = "跨域服务器/flightResult.php?code=CA1998&callback=flightHandler";
    // 创建script标签，设置其属性 
    var script = document.createElement('script'); 
    script.setAttribute('src', url); 
    // 把script标签加入head，此时调用开始 
    document.getElementsByTagName('head')[0].appendChild(script); 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

那么服务器到底做了什么呢？ 说到底，就是拼接字符串。

// 数据
$data = [
    "name":"anonymous66",
    "age":"18",
    "like":"jianshu"
];
// 接收callback函数名称
$callback = $_GET['callback'];
// 输出
echo $callback . "(" . json_encode($data) . ")"
1
2
3
4
5
6
7
8
9
10
11