一、JSONP技术解决跨域请求问题
在使用Vue做项目时，由于浏览器的同源性问题，我们无法进行跨域请求。别担心，这儿有解决方法！那就是利用JSONP！这货就是在JavaScript对象里多加了些特别符号，然后通过标签生成一个新的网址，这样就能实现网络间的信息共享。其实大致步骤就是这么回事儿：首先，在客户端造个URL包含callback函数的东西，然后将其填入src属性那儿；接着，当服务器接收到请求时，它会在这个callback函数里面发布响应数据哦；最后，只需要客户端运行几下那个返回的脚本来解析和获取这些数据就大功告成了。
二、JSONP工作原理详解
咱来聊聊怎么玩好JSONP这种东西，其实就是三部曲那么简单：首先，你在电脑上写个url，加上要调用的函数名，然后把这个地址塞到众所周知的src属性里；接着，服务器接到命令后，会解析相应的数据发回来；最后，当收到服务器的回复时，我们得赶紧执行，这样才能让要调用的函数处理这个消息。说到这儿，你应该懂了？就是用它来解决跨界请求的难题
三、安装jsonp库
想要Vue项目中使用JSONP吗？安装个jsonp库就行了！npm帮你搞定，傻瓜式操作，直接引用到项目里就欧了~
四、在Vue项目中使用JSONP进行跨域请求
1.创建JSONP请求：
在富婆网站，我们都会用上那个叫 JSONP 的组件来处理那些 JSONP 请求比如你想问问今天天气怎么样，那就需要用 jsonp 这玩意儿搞出一个带 callback 的 URL，然后再弄个回调函数，还要给它起个好听的名字。
npm install jsonp
2.将方法绑定到模板：
想让私人函数与按钮产生联系？超级简单，按下按钮就可以通过JSONP发送请求！
3.处理返回数据：
先磨练好我们自己设置的回调函数，再用它搞定服务器传回来的信息。最后，大功告成！网页上的东西就会显示出来了~
import jsonp from 'jsonp';
export default {
methods: {
getWeather() {
const url = 'http://api.weather.com/weatherData?callback=weatherCallback';
jsonp(url, (err, data) => {
if (err) {
console.log(err);
} else {
this.weatherData = data; // 处理返回的数据
}
});
}
}
}
五、注意事项和安全性考虑
轻松解决跨域难题？那就用JSONP吧!别忘了保证安全性跟兼容性。首先，拼url时要小心参数泄漏出去被人利用。然后，在用JSONP时有个问题得记住，有的浏览器可能会挑剔script标签加载的先后顺序。最后别忘记检查下你获取到的反馈数据的格式是否正确哈。
六、其他替代方案
除了那个JSONP方法，我们还有别的办法解决这个问题。比如利用CORS（跨域资源共享），这个技术挺给力的；或者嫌麻烦的话，找个代理服务器也行。不过怎么选还得看你实际需求！
七、总结
本文就来说说怎么用Vue做跨域请求，先搞明白个事儿，JSONP究竟是个啥？它有什么用？接下来就告诉你如何在Vue项目上搞定JSONP这件事，还会提醒你注意安全问题和其他选项哈。记住，具体要用哪种跨域策略要看情况而定。
城市：{{ weatherData.city }}
温度：{{ weatherData.temperature }}
。
评论0