当下流行的前后端分离项目,常遇跨域问题,现从两点,解决跨域问题 1.跨域本质:由于浏览器的同源策略 同源策略本是浏览器最基本的安全功能,是为了防止从一个域上加载另一个域上的信息,举个例子:A有一个百宝箱,B有一个百宝箱,各自的百宝箱随便取,但A要是取B的,或者B要是取A的,就会被拒绝 当协议,域名,端口其中某一个不一致的时候,就会产生跨域问题 2.前后端分离项目容易产生的跨域问题(常常是端口冲突) vue解决前后端冲突问题,最版本(4.0)后,生成的前端项目会有这样的一个文件ui\config\index.js,之前的版本也有直接在项目下新建vue.config.js,但解决的方式都是采用反向代理 dev: { 斜杠下可填充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' 第三步使用jsonp 如: //通过百度地图获取经纬度信息 ok!!!
我这该死的满头秀发!!!
|
|