跨域请求方法
程序员文章站
2022-07-10 10:19:28
...
数据请求
1.axios
npm install axios
import axios from "axios";
...
getAxios() {
axios({
url: "http://api.test.jgjapp.com/jlcfg/cities",
method: "get", //method默认是get请求
headers: { "Content-Type": "application/x-www-form-urlencoded" },
params: {
// ?search后面的值写在params中
level: "2",
citycode: "110000"
}
})
.then(function(res) {
console.log(res);
})
.catch(err => {
console.log(err);
});
},
2.axios
跨域请求
若协议 + 域名 + 端口号均相同,那么就是同域;否则是跨域
外部公用接口:
https://www.apiopen.top/api.html
跨域请求接口:https://yinshusi.com/msBank/zhz/get_code?type=job&pcode=1000000
Rract项目
也可以在
webpack.config.js
中做与Vue
项目相同的设置
打开项目生成的package.json文件,增加文件内容如下:
"proxy":{
"/msBank":{
"target":"https://yinshusi.com/msBank",
"changeOrigin":true
}
}
Vue项目
在vue项目的根目录下添加 vue.config.js文件
module.exports = {
devServer: {
proxy: {
'/msBank': {
target: 'https://yinshusi.com/msBank', // 需要请求的地址
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/msBank': '/' // 替换target中的请求地址,也就是说,在请求的时候,url用'/msBank'代替'https://yinshusi.com/msBank'
}
},
'/userFeedback': {
target: 'https://api.apiopen.top/userFeedback',
changeOrigin: true,
pathRewrite: {
'^/userFeedback': '/'
}
}
<!-- 可配置多个跨域接口 -->
},
}
}
配置后需要重新启动项目 |
npm install axios
import axios from "axios";
...
getData() {
axios({
url: 'msBank/zhz/get_code',
method: "GET", //默认是get请求
params: {
//?search后面的值写在params中
type:'job',
pcode:'1000000'
}
})
.then(function(val) {
console.log(val);
})
.catch(function(err) {
console.log(err);
});
},
postData() {
axios({
url: "userFeedback",
method: "POST", //默认是get请求
params: {
//?search后面的值写在params中
apikey:'9648872f9aa08da137ce45fe1dda8279',
text: "反馈内容",
email: "18380439999"
}
})
.then(function(val) {
console.log(val);
})
.catch(function(err) {
console.log(err);
});
}
3.axios
封装
api.js:
import axios from 'axios'
import { Message, Loading } from 'element-ui'
// true 测试服务器 false 开发服务器
const test = false
const baseURL = `http://api.${test ? 'test.jgjapp' : 'jgjapp'}.com/`
const instance = axios.create({
baseURL,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
let loadingInstance = null,
count = 0//控制loading加载框,用计数方式控制是为了防止页面中同时请求多个接口加载框提前关闭的情况
<!-- steps4_发送请求 -->
instance.interceptors.request.use((config) => {
let { data: configData } = config
count++
if (configData.loading) {
loadingInstance = Loading.service({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
}
let token = localStorage.getItem('token') || ''
delete configData.loading
let formData = new FormData()//通过FormData构造函数创建一个空对象
for (let k in configData) {
formData.append(k, configData[k])//可以通过append()方法来追加数据
}
//固定参数
formData.append('os', 'WP')
formData.append('client_type', 'wp')
formData.append('token', token)
let data = {
os: 'WP',
client_type: 'wp',
token,
...config.data
}
if (config.method === 'get') {
config.params = {
...data
}
} else if (config.method === 'post') {
config.data = formData// 等同于qs.stringify(data)
}
return config
})
<!-- steps4_请求返回 -->
instance.interceptors.response.use((res) => {
if (count > 0) {
count--
}
if (loadingInstance && count === 0) {
loadingInstance.close()
loadingInstance = null
}
let { data } = res
// todo:有的接口没有返state
// void 0===undefined
if ((data.state !== void 0 && data.state == 0) || (data.code !== void 0 && data.code != 0)) {
// 登录失效,请重新登录
if (data.errno == 10035 || data.code == 10035) {
localStorage.removeItem('token')
}
Message({
center: true,
customClass: 'message-center',
message: data.errmsg || data.msg,
type: 'error'
})
return data
} else {
data = data.values || data.result
}
return data
}, error => {
if (count > 0) {
count--
}
if (loadingInstance && count === 0) {
loadingInstance.close()
loadingInstance = null
}
})
<!-- steps3 -->
/**
*
* @param {string} url 接口地址
* @param {string} method 方法 'post' || 'get'
* @param {object} config 要提交的数据
*/
const create = (url, method, config = {}) => {
config = {
loading: true,
...config
}
return instance({
url,
method,
data: {
...config
}
})
}
<!-- steps2 -->
const hire = {
getList: config => create('接口地址','请求方式',参数),
getDetail: config => create('recruitment/pro-recruitment-detail','get',config),
}
<!-- steps1 -->
export default {
hire,
}
getList.vue:
import api from "../api";
...
methods:{
// 请求数据
async getList(pid) {
const data = await api.hire.getList({
pid: pid
});
// console.log("数据:", data);
}
}
4.jsonp
npm install jsonp
import jsonp from "jsonp"
...
<!-- 简易版 -->
methods: {
getJsonp() {
jsonp(
`http://api.map.baidu.com/place/v2/suggestion?query=1&output=json&ak=vaVH6Ls3Tisndi940ma2keNeGSm0UvH4®ion="110100"`,
null,
(err, data) => {
if (err) {
console.error(err);
} else {
console.log(data);
}
}
);
}
}
<!-- 参数版 -->
methods: {
<!-- 处理参数 -->
params(data) {
let url = "";
for (let k in data) {
let val = data[k] !== undefined ? data[k] : "";
url += `&${k}=${encodeURIComponent(val)}`;
}
return url ? url.substring(1) : "";
},
<!-- jsonp请求 -->
getJsonp() {
let url = "http://api.map.baidu.com/place/v2/suggestion";
let data = {
query: 1,
output: "json",
ak: "vaVH6Ls3Tisndi940ma2keNeGSm0UvH4",
region: "110100"
};
jsonp(
(url += (url.indexOf("?") < 0 ? "?" : "&") + this.params(data)),
(err, data) => {
if (err) {
console.error(err);
} else {
console.log(data);
}
}
);
}
}
上一篇: 跨域请求