iOS解决跨域问题
问题描述: vue项目使用axios 请求 在 安卓和pc端正常请求 但是在ios（ios12是我们遇到的）上会出现 跨域 预请求失败 导致 在catch会捕获 Network error ；
导致问题出现的原因： 是由于header里面带了很多请求参数，而后端设置的response.setHeader("Access-Control-Allow-Headers", "*");允许所有头部没有生效导致。 但是在PC浏览器或者安卓手机上，该方式又能生效（烦人的IOS兼容问题，找了好久才找到）。最终通过后台修改跨域配置解决ios请求兼容请问题；
vue项目中常用到哦，不看看吗
现在没用过vue框架，都不好意思说自己是干前端呢，当然这句话并不是说干前端非得会vue,只是想说明他的火爆程度，现在连小程序都推出了mpvue，你确定你还不赶紧了解了解vue吗，我这篇文章的内容都是些很基础的vue知识，后续会补上
解析 ：
- beforecreate ：可以在这加个loading事件
- created ：在这结束loading，还做一些初始化，实现函数自执行
- mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
- * beforeDestory * : 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容
其中key为对象里面的键，value为对象里面的值，其本意就是动态改变原来已经固定的值值，就需要使用vue.set(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)
解析
遍历后{{parent.name}}的已经固定了，这时候点击编辑按钮，改变里面的值，虽然后台数据已经发生了改变，但那时页面渲染的效果并不会发生改变，这时候要想改变页面上的值，就需要使用vue.set(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)，
在空的数组中不能使用push传入数据，所以应当使用vm.$set给数组添加
** 使用v-bind动态给元素绑定
这样可以在遍历的时候给不同的元素动态绑定不同id
在下次dom更新循结束之后延迟回调，在修改数据之后立即使用这个方法，获取更新后的dom
在vue中获取当前点击的元素对象，在点击的方法里 传 入$event,然后在methods方法里面接受传过来的值，具体如 下
这个指令保持在元素上直到关联实例结束编译 /，可隐藏为编译的标签直到实例准备完毕
computer也是一个对象，类似于methods,在里面也可以定义很多方法。计算属性的结果会被缓存，写法如下：
前一兄弟元素必须有v-if 或v-else-if
前一兄弟必须有v-if或v-else-if
vue包含一组观察数组的变异方法，所以它们也会出发视图更新
由于javascript的限制，Vue不能检测一下变动的数组
对于已经创建实例，vue不能动态添加根级别的响应式属性，但是可以使用Vue.set( object, key, value )方法嵌套对象添加响应式属性
props可以是数组或对象，用于接收来父组件的数据，或者使用对象作为替代
1.axios.post('url', {data} )
.axios发送跨域请求
var headers ={
'headers':{
'Content-Type':' application/x-www-from-urlencoded'
}
}
axios.$http.post('url', {data},设置请求头)
axios发送post请求时传过去的数据格式不是formate格式。从而获取不到后台传过来的数据
解决办法：在页面中引入qs模块
import qs from'qs';
axios.interceptors.request.use((config)=){
config.date=qs.stringify(config.data);
returnconfig;
}
私有过滤器是将过滤器中的方法直接绑定到当前Vue实例上面，所以只能在当前托管区域中使用
全局过滤器相当于是将过滤器中的方法绑定到Vue构造函数的原型中，可以保证每一个Vue实例的托管区域都可以使用
vm在很多时候，页面还未加载出来，不能使用vm，这时我们有两种解决方法
访问在线试听
如果项目数据过多的话，直接管理是非常不方便的，这时候就应该采用vuex,Vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用所有的组件的状态
mui中的区域滚动组件，有个默认阻止冒泡事件，这时候在vue中使用click事件就会无法触发，具体做法是把click事件改为tap事件,只有区域滚动事件click事件才无法生效
vue中的get传参
axios.get(url,{params:{'aa':hello,'bb':'baibai'}})
我把图片的id都放入数组，让然后传给你，你再传给我过滤后的图片信息，然后你让我通过自己创建的数组里面的id来对你传过来的图片信息进行处理，可是我自己创建的数组会随着不同按钮而发生改变，
const arr1=[12,23,45,12,45];
const arr2=[12:'你好',23:'是吗',45:'算了']
for(let i arr1){
vm.$set(arr2,i,arr2[arr2[i]]);
}
这样得到的arr2 =[12:'你好'，23:'是吗'，45:'算了'，12:'你好'，45:'算了']
var a=[1,2,3,4,5,6,];
var b=a.filter((value,index)={
value:当前数组对应的值
index:当前值对应的索引
returnindex！=2;
})
在vue中
import Vue from ‘vue’ //es6写法
import App from ‘./App’
父子组件的通信：emit
非父子组件之间的通信：event bus
复杂情况：vuex
跨域时session丢失问题的解决
项目需求需要前后端分离,做一个登录验证码,但尴尬的是node中,因为跨域不能携带sessionId的原因,导致session丢失,node不能获取验证码,没法做验证
经过将近半个小时的折腾最终解决,特此保留
我的后端使用的是node的express框架,在app.js中进行如下设置
```
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', ''); //必须写上自己的域名,不能为*
res.header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
res.header('Access-Control-Allow-Credentials', 'true');//允许携带cookie
if (req.method == 'OPTIONS') {
res.send(200);
}
else {
next();
}
});
```
前端使用的是axios中进行了,如下的设置
```
axios.defaults.withCredentials = true;//设置允许携带cookie,默认不让携带
```
vue.js使用http-proxy-middleware解决跨域请求问题
最近在使用vue-cli搭建项目的过程中，遇到了跨域请求数据的问题，这里贴出我的解决方法，希望对大家有所帮助。
什么是跨域请求：
如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容，如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。
这里，数据请求用的是vue-resource(目前vue官方是推荐使用axios)，安装插件：
npm install--save-devvue-resource
1
在main.js中引入插件：
importVueResourcefrom'vue-resource'
Vue.use(VueResource)
这里，解决跨域使用的是http-proxy-middleware来进行接口代理，安装方法同上：
npm install--save-devhttp-proxy-middleware
下面开始谈正事，举个栗子：
本地项目地址是：localhost:8080，现在我们要访问 和 这两个线上地址：
首先，设置build/dev-server.js：
varproxyMiddleware =require('http-proxy-middleware')
varserver = express()
server.middleware = [ proxyMiddleware(['/film/coming-soon'], {target:'', changeOrigin:true}), proxyMiddleware(['/billboard/home'], {target:'', changeOrigin:true})];
server.use(server.middleware);
注意，当要访问多个线上地址时，公共的地址部分写在target属性值里面，比如这里的 ，然后[ ]里边写地址的不同部分。
然后，修改config/index.js :
dev:{env:require('./dev.env'), port:8080, proxyTable: {'/api': { target:'', changeOrigin: true, pathRewrite: {'^/api':''} } } }
这里的target同上面的一样，然后’/api’和’^/api’代表的就是这个根目录地址；
然后，在页面中具体的调用为：
this.$http.get('api/billboard/home').then((response) = {
});
这里，url的值为api + [ ] 中的部分 ;
然后，我们就解决了vue中的跨域问题 ;
这里，贴一下http-proxy-middleware插件的github地址，看更多用法 :
axios可以解决跨域访问的问题吗
axios 的跨域问题，分以下几种情况：
1、 server 端不支持跨域，比如遇到下面的错误就是这种情况
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.
解决方案：如果 server 端是自己开发的，那么修改相关代码支持跨域即可。如果不是自己开发的，那么可以自己写个后端转发该请求，用代理的方式实现。
2、 server 端支持跨域，但不能响应 OPTIONS 请求，比如在开发者工具中看到下图中的情况，说明 Nginx 不能响应 OPTIONS 请求。