vue如何配置服务器端跨域_客户端(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
现在我们来宏观分析一下,跨域失败以及成功的深层次原因是什么?
客户端(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内核。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
vue如何配置服务器端跨域_客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解...相关推荐
- vue 判断页面加载完成_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
- vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话 第412篇// 正文共:1800 字// 预计阅读时间:8 分钟 简介 通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
- vue 2个方法先后执行_浅析Vue的2个版本
一.@vue/cli用法 安装 npm npm install -g @vue/cli yarn yarn global add @vue/cli 安装完成后可以使用 vue create 来创建一个 ...
- java接收并存储文件_客户端读取本地文件的数据,发送到服务器,服务器接收并存储到文件中...
只实现了传送文件的功能. 编写Socket客户端和服务器程序,客户端读取本地文件的数据,发送到服务器,服务器接收并存储到文件中. 消息格式: 字段 长度(单位字节) 内容 -------------- ...
- vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
- for根据ID去重_汽车ECU参数标定之配置Overlay RAM实现Qorivva MPC57xx系列MCU参数在线标定和代码重映射原理和方法详解...
内容提要 引言 1. MPC5744P的Overlay RAM工作原理介绍 2 MPC5744P的Flash Overlay配置详解 2.1 平台Flash标定区域描述字寄存器配置字0--PFLASH ...
- java开发微信如何维护登录状态_微信小程序中做用户登录与登录态维护的实现详解...
总结 大家都知道,在开发中提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户 ...
- c linux time微秒_学习linux,看这篇1.5w多字的linux命令详解(6小时讲明白Linux)
用心分享,共同成长 没有什么比每天进步一点点更重要了 本篇文章主要讲解了一些linux常用命令,主要讲解模式是,命令介绍.命令参数格式.命令参数.命令常用参数示例.由于linux命令较多,我还特意选了 ...
- git config设置用户名_一个神奇的工具,实现多人协作,git常用命令详解
git是一款开源的分布式版本控制工具,在世界上所有分布式版本控制工具中,git是最快.最简单.最流行的. git的作者是Linux之父:Linus Benedict Torvalds,当初开发git仅 ...
最新文章
- HDLBits 系列(28)PS/2 mouse protocol(PS/2 packet parser)
- 推荐!国外程序员整理的 C++ 资源大全(https://github.com/fffaraz/awesome-cpp)
- 6、通过xpath获取网页数据
- 解密初、中、高级程序员的进化之路
- java session持久化_Session的生命周期和持久化
- 【Python】HackBack(获取暴力破解服务器密码的IP来源)
- shiro身份验证测试
- 情人节海报psd分层模板|好的图层,任你选择
- Ubuntu安装GoogleTest框架并测试C++代码
- linux 进程和线程或线程和线程之间通过管道通信(pipe)
- Linux文件内容操作(六) 格式化文本 fmt
- 上传本地项目到gitee_使用git将本地代码上传到gitee远程仓库
- 人居一世间, 忽若风吹尘 2019.07.07.
- ❤️❤️❤️Unity实现毛笔书法
- 基督-神[上帝]的道,真理的本真归回
- 连分数与丢番图方程简介
- python tkinter控件treeview的数据列表显示的实现_code
- 黄灯闪烁c语言程序,模拟交通灯C程序,用定时器0,如何实现黄灯闪烁功能
- adb模拟按键home_adb命令中 模拟按键 KeyCode 部分详解
- 【实现选定单选框出现对应的选择框或输入框】
热门文章
- 百例1-10(一到三章)总结
- 双圆弧插值算法(一)
- 情感分析:基于卷积神经网络
- 2021年大数据Hadoop(十五):Hadoop的联邦机制 Federation
- 2021年大数据Flink(二十二):Time与Watermaker
- HarmonyOS UI开发 DirectionalLayout(定向布局) 的使用
- TypeError: Total() missing 1 required positional argument: ‘self‘
- Kotlin for 循环使用
- 讯飞语音的中的bug用户校验失败
- Scala函数式编程(三) scala集合和函数