版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haochangdi123/article/details/81482030
1.vue中设置Axios跨域
axios已经成为Vue官方推荐的ajax获取后台数据的方式,但是在使用中我们需要解决axios的跨域问题,我们在这里以vue-cli的2.x版本为例,来解决axios的跨域问题。
config/index.js
中
我们通过设置dev配置的proxyTable来实现代理
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://127.0.0.1:3000/',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '' //这里理解成用‘api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://127.0.0.1:3000/user/add',直接写‘api/user/add’即可
//或者继续往下看可以连api/都不用加
}
}
}
},
然后在config/dev.env.js
中绑定dev环境的路径
(注意是是 '"development"'
这样的模式,不要少写了引号)
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST: '"/api"' //这里的api就是我们在上面配置的http://127.0.0.1:3000/
})
然后在config/prod.env.js
中绑定生产环境的路径
module.exports = merge(prodEnv, {
NODE_ENV: '"production"',
API_HOST: '"https://www.baidu.com"' //你真实的线上地址
})
在axios的统一配置文件中
根据环境的不同会自动匹配不同的接口路径
import axios from 'axios';
const baseURL = process.env.API_HOST; // 当前环境的接口前缀
get(url, params) { // get
return axios({
method: 'get',
baseURL: baseURL, //当前环境的接口路径
url,
params, // get 请求时带的参数
timeout: 5000,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
}).then(
(response) => {
return checkStatus(response);
}
)
}
2.使用axios来进行referer伪造
jsonp是最为常见的一种跨域解决方法,并且是兼容性最好的一种方案。在我们平时抓取数据的时候我们通过会模拟jsonp的请求,但是jsonp请求为了安全起见,会进行refer的验证,这时我们就需要伪造referer了。
本来我们是应该直接jsonp去请求的,但是现在我们要在后台加入一层代理
ajax.js
import axios from 'axios'; //引入axios
export function getDiscList() {
const url = '/api/getDisList'; //我们请求的地址(指向我们的后台代理)
// 参数
const data = Object.assign({}, commonParams, {
platform: 'yqq',
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode: 0,
categoryId: 10000000,
rnd: Math.random(),
format: 'json' // 因为本来是jsonp的请求,所以会返回jsonp的请求格式,因为我们采用了代理,所以将返回格式改为json
});
// 利用axios向代理请求
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data);
});
};
在build的webpack.dev.conf.js文件中
const axios = require('axios');
const express = require('express');
const app = express();
devServer: {
before(app) {
//axiosd调用代理的地址会触发回调函数,去调用真实数据的地址
app.get('/api/getDisList', function (req, res) {
//实际要调用的抓取数据的地址
var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg';
axios.get(url, {
//设置头部,改变请求的referer和host
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
res.json(response.data); //response是api地址返回的,数据在data里。
}).catch((err) => {
res.json({
code: '2',
message: err
})
})
})
}
}
最后直接调用就可以了
import {getDiscList} from './ajax.js';
export default {
data() {
return {
};
},
methods: {
_getDiscList() {
getDiscList().then((res) => {
console.log(res);
});
}
},
created() {
this._getDiscList();
}
};