在开发中,有时会遇到这种问题:通过浏览器去访问一个接口可以正常获取到信息,但是通过点击事件去请求这个接口却无法正常获取到想要的信息。此时,你可能就是遇到跨域问题了, 在Koa中的解决方案如下:
1. 安装插件
npm i koa2-cors --save
2. 引入及使用插件
const Koa = require('koa');
const app = new Koa();
// 引入插件
const cors = require('koa2-cors');
// 配置插件
app.use(cors({
// 任何地址都可以访问
origin:"*",
// 指定地址才可以访问
// origin: 'http://localhost:8080',
maxAge: 2592000,
// 必要配置
credentials: true
}));
3. 客户端使用
1. 原生JS中配置
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.xxx.com/api');
// 必要配置
xhr.withCredentials = true;
xhr.onload = onLoadHandler;
xhr.send();
2. JQuery中配置
$.ajax({
url: "http://www.xxx.com/api",
type: "GET",
xhrFields: {
// 必要配置
withCredentials: true
},
crossDomain: true,
success: function (data) {
render(data);
}
});
3. Vue-resource中配置
this.$http.get('login', { credentials: true }).then(res => {
if (res.body.code != 200) {
console.log('登录失败')
} else {
console.log('登录成功')
}
})
this.$http.post('login', { userInfo: $('.form-signin').serialize() }, { credentials: true }).then(res => {
if (res.body.code != 200) {
console.log('登录失败')
} else {
console.log('登录成功')
}
})
4. Axios中配置
// npm i axios --save
import axios from 'axios'
const service = axios.create({
// 接口地址
baseURL: process.env.BASE_API,
// 超时时间
timeout: 5000,
// 必要配置
withCredentials: true
})