Koa 中通过 Koa2-cors 配置服务器端允许跨域以及 Cookie 允许跨域

越陌度阡

发布于 2021-11-24 11:45:18

2.5K0

发布于 2021-11-24 11:45:18

在开发中，有时会遇到这种问题：通过浏览器去访问一个接口可以正常获取到信息，但是通过点击事件去请求这个接口却无法正常获取到想要的信息。此时，你可能就是遇到跨域问题了，在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 
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/11/21 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery