欢迎访问我的博客地址 : 博客地址
jsonp跨域
1、安装
npm install jsonp -S
2、引入
一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的拼接,封装好这个jsonp文件后export出去,之后在哪里用到就再在那里import。
新建jsonp.js文件来封装原始jsonp插件
import originJSONP from 'jsonp'
/**
* 封装jsonp
* @param {*} url 原始的jsonp第一个参数是url,第二个参数是option,这里为了比较好写参数做了下封装
* @param {obj} data 参数
* @param {*} option jsonp的option
*/
export default function jsonp(url, data, option) {
// 如果url没有?就加一个?拼接
url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
return new Promise((resolve, reject) => {
// 原始jsonp的三个参数,url、option、回调函数
originJSONP(url, option, (err, data) => {
// 类似node的设计,如果err是null,表示成功,data是后端返回的数据
if (!err) {
resolve(data)
} else {
reject(err)
}
})
})
}
export function param(data) {
let url = ''
for (var k in data) {
let value = data[k] !== undefined ? data[k] : ''
url += '&' + k + '=' + encodeURIComponent(value)
}
return url ? url.substring(1) : ''
}
3、配置参数
创建api文件夹,用于储存api调用的js的config.js
export const commonParams = {
g_tk: 5381,
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: 0,
format: 'jsonp'
}
export const options = {
param: 'jsonpCallback'
}
export const ERR_OK = 0
可以在专门请求接口的js文件夹中新建一个getDataLists.js文件来跨域获取接口数据。
// 引入封装好的jsonp
import jsonp from './jsonp.js'
import {commonParams, options} from './config'
// 假设这里为跨域请求当前城市的接口
export function getDataLists() {
const url = 'https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg'
const data = Object.assign({}, commonParams, {
uin: 0,
needNewCode: 1,
platform: 'h5'
})
return jsonp(url, data, options)
}
4.使用
import {getDataLists} from '.././assets/api/getDataLists.js'
export default{
methods:{
_getDataLists () {
// 在这里就可以获取到当前城市的接口数据了
getDataLists().then((res) => {
//console.log(res)
})
}
},
mounted () {
this._getDataLists()
}
——————————————————————————————————
axios跨域访问
1.安装axios
npm install -S axios
2.引入main.js中
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'
axios.defaults.headers.post['Content-Type'] = 'application/json';
关键代码是:Axios.defaults.baseURL = '/api',这样每次发送请求都会带一个/api的前缀。
3.配置
vue-cli3.0配置vue.config.js文件
在module.exports ={}中添加如下
devServer: {
open: true, //是否自动弹出浏览器页面
host: "localhost",
port: '8081',
https: false,
hotOnly: false,
proxy: {
'/api': {
target: 'https://www.api.com/api', //添加API服务器的地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
}
3.使用
methods:{
_get(){
axios.get('')
.then((res)=>{
console.log(res.data)
})
}
},
mounted(){
this._get()
}
axios本地模拟数据
在根目录下新建vue.config.js文件,
添加以下:
const express = require('express')
const app = express()
var www = require('./public/mock/mock.json') //本地文件的地址
var apiRoutes = express.Router();
app.use('/api', apiRoutes)
module.exports = {
before(app) {
app.get('/api/www', (req, res) => {
res.json({
errno: 0,
data: www
})
})
}
}
使用
axios.get('/api/www').then((res)=>{
console.log(res)
})