vue解决跨域问题

当下流行的前后端分离项目，常遇跨域问题，现从两点，解决跨域问题

1.跨域本质：由于浏览器的同源策略

　　同源策略本是浏览器最基本的安全功能，是为了防止从一个域上加载另一个域上的信息，举个例子：A有一个百宝箱，B有一个百宝箱，各自的百宝箱随便取，但A要是取B的，或者B要是取A的，就会被拒绝

当协议，域名，端口其中某一个不一致的时候，就会产生跨域问题

2.前后端分离项目容易产生的跨域问题（常常是端口冲突）

vue解决前后端冲突问题，最版本（4.0）后，生成的前端项目会有这样的一个文件ui\config\index.js，之前的版本也有直接在项目下新建vue.config.js，但解决的方式都是采用反向代理

dev: {  //重点，设置反向代理  proxyTable: {    '/': {      target: 'http://localhost:8080',//vue访问后台服务的端口      changeOrigin: true,      pathRewrite: {        '^/': '/'      }    }  },}

斜杠下可填充url，如'/api'，则后端接口处也要有'/api'

3.向外部获取资源时，遇到的’Access-Control-Allow-Origin’跨域问题

（1）采用jsonp方式解决，就是和服务端约定一个回调函数，把数据作为参数给到服务端，并获取处理结果

（2）缺点只支持get请求

第一步执行npm命令

npm install --save vue-jsonp

第二步在main.js当中引入jsonp

import VueJsonp from 'vue-jsonp'

Vue.use(VueJsonp)

第三步使用jsonp

如：

//通过百度地图获取经纬度信息
getBaidu(){
  let url = "http://api.map.baidu.com/geocoding/v3/?address="+encodeURIComponent(param)+
    "&output=json&ak=填自己申请的";
  this.$jsonp(url).then(res => {
    console.log(res);
    //你已成功解决
  });
},

ok！！！

我这该死的满头秀发！！！

　　

赞 (0)

相关推荐