技术标签： 踩坑日记 前端框架 前端必会面试题 前端 vue.js javascript
前两天遇到了跨域问题，报了Access to XMLHttpRequest at‘httplocalhost的错，在网上找了一些资料，我是通过配置vue.config.js、proxy实现的，感觉非常方便，分享给大家！
首先，来个背景，为什么会出现跨域？--（先了解一下另一种jsonp，我用的不是这种方法，但怎么说呢，比如面试，多了解几种方法总是好的，jsonp就不贴具体方法了，因为我这次没试）
因为浏览器有同源策略（补充：协议、域名、端口相同是同源，
同源策略限制：
1、js脚本不能访问另一个域下的cookie、localstorage
2、不能操作另一个域dom
3、ajax不能跨域请求
也就是限制不同源的资源交互，不能跨域访问，但是在一个页面中引入不同域的js却可以自由访问，例如img这个标签，基于这个原理jsonp出现。
jsonp和json没关系，json是数据交换格式，jsonp是非官方数据传输协议。
怎么实现，前端传callback参数，后端用这个参数的值作为函数名称包裹json数据，这样给前端的就是js代码了。
二、实践解决跨域方法（基于封装好的axios，非原生）
1.在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域，在proxy中设置要访问的地址，并重写/api为空的字符串。
vue.config.js
// const { defineConfig } = require('@vue/cli-service')
//在vue中使用proxy进行跨域的原理是：
//将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），
//再由本地的服务器去请求真正的服务器。
module.exports = {
devServer:{
proxy:{
'/api':{//表示拦截以/api开头的请求路径
target:'http://（这里填你项目真实的后端地址）',
changOrigin: true,//是否开启跨域
pathRewrite:{
'^/api':'' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
}
}
}
}
}
也就是把vue.config.js配置成上图所示。
2、在axios.create的时候将baseURL设置为api ，简单两步，就完成啦。
http.js（封装axios的那个文件）
import axios from 'axios'
var http=axios.create({
baseURL:'api',//把原来的项目地址，改成api，解决跨域问题
timeout:3000
})我就是通过以上这两步，解决了我的跨域问题，希望给大家参考。
再补充一下原理：
1、为什么要重写api变为空字符？
因为如果像我们那样配置好后，我们请求的实际路径会带上api，但我们发起请求的时候是不需要api的，所以要把他变成空字符。
2、在vue中使用proxy进行跨域的原理是：
将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。
sql中的conditions是在select,delete,update语句常常用到的，其中range condition只包含：(not)between..and.2)oracle的between..and..前后都是闭区间，也就是说包含两个端的数，例如：SELECT * FROM employeesWHERE salaryBETWEEN 2000 AND 3000;查询返回 2000<..._oracle not between and日期
解决方案1. File - Project Structure2.选中父工程，点击 + ，Import Module3.找到子工程的pom.xml4.Next5.Next6.Finish7.OK
转自：http://blog.csdn.net/augusdi/article/details/9000829OpenCV图像的轮廓的匹配一个跟轮廓相关的最常用到的功能是匹配两个轮廓.如果有两个轮廓,如何比较它们;或者如何比较一个轮廓和另一个抽象模板.矩比较两个轮廓最简洁的方式是比较他们的轮廓矩.这里先简短介绍一个矩的含义.简单的说,矩是通过对轮廓上所有点进行积分运
今天心情不太好，来学一下 List 吧！什么是队列队列是数据结构中比较重要的一种类型，它支持 FIFO，尾部添加、头部删除(先进队列的元素先出队列)，跟我们生活中的排队类似。队列有两种：单队列循环队列单队列就是常见的队列, 每次添加元素时，都是添加到队尾：以数组实现的队列为例，初始时队列长度固定为 4，font 和 rear 均为 0：每添加一个元素，rear 后移一位。当添加四个元素后， rea..._java队列获取队尾
课程介绍在学习了前面章节OpenGL基础知识后，读者应该具备了复杂界面特效、图片高效处理的开发能力。接下来的章节主要转向Android视频应用开发中的OpenGL ES部分。一. 视频播放器搭建1. 视图容器界面视图容器依旧使用GLSurfaceView，绘制方式是RENDERMODE_CONTINUOUSLY持续绘制的模式(课程演示，减少框架部分，相应的有不必要的性能损耗)。..._mediaplayer opengl
1.描述接口逻辑的模型。2.包括 netlist spef sdc def3.所有以上文件只描述和接口相关的逻辑，其他逻辑一概排除3.用于STA/PR/DC的hierachical flow,相对于ETM model,更精确，ETM 只包含接口的timing arc信息，无法精确的进行cross talk 分析4.XILM 包含接口的耦合电容信息，可用于精确的cross...
今天转了一些常用处理方法，经常用得到这些方法，自己以不想抄，只能ＣＯＰＹ了。方法一： 1.手工注册OCX控件 将该控件随程序一起发布，然后，将此文件拷到windows\system，或者直接放在本运行目录，然后执行dos命令，run( "regsvr32 *.ocx ") *表示具体的文件。然后写注册表,将控件注册标志置为1，在程序开始运行时，先检查该标志，是否需要进行注_pb中ocx控件怎么使用
最近在项目中遇到Bean循环引用的问题 问题是这样的：Caused by: org.springframework.beans.factory.BeanCurrentlyInCreationException: Error creating bean with name 'storageQueryService': Bean with name 'storageQueryService' has_bean循环引用
制约中国工业软件发展的因素大体有工业软件的专业性太强、国内企业起步晚底子薄、工业软件用户付费意愿弱等多方面原因。首先，工业软件的专业性大体都比较强，开发难度比较高，而中国的计算机科学与技术起步晚，发展缓慢，前期大多都是在引进消化推广，更谈不是自主研发什么，比如工业设计类的基本被国外厂商占着，大伙知道的比如CAD、solid works什么的，同时这些国际化软件被广泛推广占领国内市场也让国...
ToolBar工具栏在所有窗体应用程序中都广泛被使用，使用ToolBar可以很好的规范菜单功能分类，用户可根据菜单栏来选择不同的功能，Qt中默认自带ToolBar组件，当我们以默认方式创建窗体时，ToolBar就被加入到了窗体中，一般是以QToolBar的方式存在于对象菜单栏，如下所示。实现顶部菜单栏二级菜单，二级顶部菜单与一级菜单完全一致，只是在一级菜单的基础上进行了延申，如下代码则是定义了一个二级菜单。事件，绑定到主窗口中，实现在窗体任意位置右击都可以弹出菜单栏，代码如下。还可以将顶部的菜单通过。_qt 导航栏
简介javancss是用于圈复杂度检查的，例如一个方法里有很多很多的for if else，则圈复杂度就会很多，也就是说这个方法的分支太多了，最大问题就是导致代码非常丑陋，有可能情况也会导致效率问题。安装下载：http://download.csdn.net/detail/magic_wz/6591913官网：http://www.kclee.de/clemens/java/javancss/以w..._javancss代码检查
ueditor在JSP中的应用_ue.geteditorjsp