客户端(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模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
javascript解析json实例详解
Nov 05 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
vue实现移动端input上传视频、音频
Aug 18 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
神族 Protoss 剧情介绍
2020/03/14 星际争霸
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
JS中数组重排序方法
2016/11/11 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
vue中过滤器filter的讲解
2019/01/21 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python-基础-入门 简介
2014/08/09 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python中functools模块的常用函数解析
2016/06/30 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
python flask框架实现重定向功能示例
2019/07/02 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
四年大学生活的自我评价范文
2014/02/07 职场文书
人事任命书格式
2014/06/05 职场文书
学生自我评语
2015/01/04 职场文书
写给媳妇的检讨书
2015/05/06 职场文书