客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解


Posted in Javascript onAugust 26, 2017

本篇博客主要说明:

前后端框架(本例中是vue和koa)如何发送请求?获取响应?

以及跨域问题如何解决?

客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解

vue部分:

import App from './App.vue'
import Axios from 'axios'
new Vue({
  el: '#app',
  render: h => h(App),
  mounted(){
    Axios({
      method: 'get',
      url: 'http://localhost:3000',
    }).then((response) => {
    console.log(response);
    })
  }
})

koa部分:

const Koa = require('koa');
const cors = require('koa-cors');
const app = new Koa();
const main = ctx => {
  ctx.response.body = 'Hello World';
};
app.use(cors());
app.use(main);
app.listen(3000);
console.log("服务已启动");

坑集锦:

1.单纯引入koa框架并且开启服务,会出现跨域错误

XMLHttpRequest cannot load http://localhost:3000/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080';; is therefore not allowed access.
bundle.js:1200 Uncaught (in promise) Error: Network Error
  at createError (bundle.js:1200)
  at XMLHttpRequest.handleError (bundle.js:1046)

2.跨域方案尝试

①引入cors模块(失败,TypeError: res.setHeader is not a function)

const cors = require('cors');
app.use(cors());

②引入koa-cors模块(成功,解决跨域问题,并正确返回数据)

const cors = require('koa-cors');
app.use(cors())

此时会在新的http response的头部信息中会新增2个字段。

Access-Control-Allow-Methods:GET,HEAD,PUT,POST,DELETEAccess-Control-Allow-Origin:http://localhost:8080

客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解

现在我们来宏观分析一下,跨域失败以及成功的深层次原因是什么?

客户端(http://localhost:8080)

服务端:(http://localhost:3000)

跨域请求失败是谁的原因?
服务器的原因。

为什么这么说?

因为在服务器端引入koa-cors之前,注意,是服务器端,我们的跨域访问失败。

而在服务器引入跨域请求模块koa-cors之后,而客户端没有做任何改变,跨域访问就成功了。

具体来说,就是在返回的请求头里加入了2个跨域请求的字段,上文也给出了详细的HTTP定义。

一个代表支持的请求方法,本例中是get方法。

一个代表允许使用上述方法的域,本例中是http://localhost:8080。

1.那么聪明的你就会问了,koa-cors本质上是一个node模块,这个模块是怎么做到支持跨域访问到呢?

我想koa-cors肯定调用了node模块http,其余模块暂时未知。

2.那么聪明的你又会想到,axios呢,它的内部工作原理是什么?

我想肯定用到了的XMLHttpRequest这个对象,基于XMR对象做了封装,暂且知道这么多。

3.所以说聪明的你会有一个领悟!

node模块不止是能在服务器端调用,在客户端也可以调用。

说清楚一点,就是node模块不止能够封装node.js引擎的api,而且能封装web V8引擎的api。

若是想问原因的话,我想是因为node是基于V8y引擎开发的服务器环境,因此v8 api基本上是通用的,暂时这么理解。

所以说,前端开发模块化编程趋势下,nodejs必须要会,因为二者都是在强大的V8引擎驱动下工作的。

最后说个微观的坑...

下面的代码中,app.use(cors());必须在app.use(main);之前。

const Koa = require('koa');
const cors = require('koa-cors');
const app = new Koa();
const main = ctx => {
  ctx.response.body = 'Hello World';
};
app.use(cors());
app.use(main);
app.listen(3000);
console.log("服务已启动");

题外话:

和学长吃中饭的过程中,讨论到webkit,gecko和v8.以及手机浏览器和桌面浏览器的区别。

主要总结出几点:

1.v8是webkit的js引擎,Gecko有自己的js引擎。

2.PC端和移动端,统一理解成webkit端就行。

因为safari和chrome都是webkit内核,可以类比safari为苹果手机,chrome类比为android手机。

由此推理出安卓手机和苹果手机自带浏览器都是webkit内核。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
日期 时间js控件
May 07 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
jQuery使用方法
Feb 04 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
vue组件中的数据传递方法
May 14 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 #Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 #Javascript
js实现本地时间同步功能
Aug 26 #Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 #jQuery
Javascript快速实现浏览器系统通知
Aug 26 #Javascript
深入浅出es6模板字符串
Aug 26 #Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 #Javascript
You might like
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
JavaScript Split()方法
2015/12/18 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Python List cmp()知识点总结
2019/02/18 Python
Python检测数据类型的方法总结
2019/05/20 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
python实现图像拼接功能
2020/03/23 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
幼儿园家长会欢迎词
2014/01/09 职场文书
营业员岗位职责
2015/02/11 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
Python find()、rfind()方法及作用
2022/12/24 Python