JSONP,cors方式 ,vue-cli反向代理(最常用的方法)
JSONP
核心思想:网页通过添加一个script元素,向服务器请求 JSON数据,服务器收到请求后,将数据> 放在一个指定名字的回调函数的参数位置传回来。
原理:
- 客户端利用 script 标签的 src 属性,去请求一个接口,因为 src 属性不受跨域影响。
- 服务端响应一个字符串
- 客户端接收到字符串,然后把它当做 JS 代码运行。
vue.js中的代码
this.$http.jsonp('http://www.domain2.com:8080/login', {
params: {},
jsonp: 'handleCallback'
}).then((res) => {
console.log(res);
})
cors方式
- 前端什么也不用做
- 后端需要开启cors
- CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。
解决跨域----反向代理
vue-cli的使用
npm install -g @vue/vli (一次安装)
vue --version (查看版本)
vue create myapp (创建项目)
npm run serve (开发环境构建)
npm run build (生产环境构建)
npm run lint (代码检测工具 )
Proxy(代理)
- 通过启动本地服务器进行代理转发目标服务器。而跨域只针对于浏览器,对于node服务发出的请求是不会出来跨域的,从而解决了跨域的问题。
- 在vue.config.js文件
Vue.config.js的配置(配置反向代理)----在module.exports中
deSever:{
proxy:{
'/api':{
target:'https://xxxxxx.com', //请求后台链接
changeOrigin:true //允许跨域
}
}
}
自定义一个开口路径:
deSever:{
proxy:{
'/yuanrun':{
target:'https://xxxxxx.com', //请求后台链接
changeOrigin:true, //允许跨域
pathRewrite:{
'^/yuanruan':'' //路径重启---将自定义路径yuanrun替换成空字符串,达到的效果一样
}
}
}
}