客户端(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 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
js+css实现打字效果
Jun 24 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
微信小程序实现顶部普通选项卡效果(非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
php防止网站被攻击的应急代码
2015/10/21 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python进程类subprocess的一些操作方法例子
2014/11/22 Python
python使用fork实现守护进程的方法
2017/11/16 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
python中的测试框架
2020/11/13 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
党员公开承诺书范文
2014/03/25 职场文书
营业员岗位职责
2015/02/11 职场文书
python 调用js的四种方式
2021/04/11 Python
在js中修改html body的样式
2021/11/11 Javascript
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏