跨域的理解（axios）_axios跨域

​
什么是跨域

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 。前后端分离开发中，需要考虑ajax跨域的问题。

1、配置axios代理

// 开启代理服务器（方式一）不能配置多个代理
devServer: {
    proxy:'http://localhost:8001'
} 

//开启代理服务器（方式二）可以配置多个代理
devServer: {
    proxy: {
        '/jojo': {
            target: 'http://localhost:8001',    
            pathRewrite:{'^/jojo':''},
            // ws: true, //用于支持websocket,默认值为true
            // changeOrigin: true //用于控制请求头中的host值,默认值为true
        },
        '/atguigu': {
            target: 'http://localhost:8002',
            pathRewrite:{'^/atguigu':''},
            // ws: true, //用于支持websocket,默认值为true
            // changeOrigin: true //用于控制请求头中的host值,默认值为true
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2、axios使用
axios可以带数据发送请求给后端

 axios.get(`https://api.github.com/search/users?q=${this.input}`).then(
    response => {
        console.log('成功访问dao数据',response.data)
    },
    error => {
        console.log('错误信息',error.message)
    }
  )
1
2
3
4
5
6
7
8

3、vue中qs的使用（跨域携带参数）

1. 安装

npm install qs

3. 组件中声明应用

import qs from ‘qs’

4. 使用

qs.parse()是将URL解析成对象的形式

qs.stringify()是将对象 序列化成URL的形式，以&进行拼接
1
2
3

 4. 实例
1

let data = qs.stringify({
    "username":this.username,
    "password":this.password
});
1
2
3
4

结果：

username=liao&password=123456
1

4、axios与qs的使用

const data = {
    hid: this.hid,
    amount: this.roompeople,
}
// 查询出酒店信息成功后，通过酒店的hid来查询所属该酒店的全部房间信息
axios.post('http://localhost:9527/room/getRoomByHid',qs.stringify(data)).then(
    request =>{
        const code = request.data.code
        if(code === 200){
        	this.hotel = response.data.data
        }else{
            console.log('通过酒店hid查询酒店信息失败')
        }
    }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

补充：vue-resource

为vue团队开发，1.0版本后不在维护

//main.js声明与使用

import vueResource from ‘vue-resource’

Vue.use(vueResource)

​