由浅入深学习webpack+vue全家桶，实现知乎日报--webpack创建基本项目步骤（第七节）使用代理解决跨域问题

在上一节，我们介绍了如何进行生产环境打包。一般情况下将打好的生产包和后台程序部署到tomcat，然后启动tomcat即可通过域名端口号访问。那么如果是这种情况，生产包与后台程序不存在跨域问题；如果生产包与后台程序违背了同源策略^[1]，那么就会发生跨域问题。还有一种情况必然会发生跨域问题：开发环境中与后台程序进行测试。

image.png

跨域限制是服务端的一个行为，当后端程序开启对某些域名的访问限制后，只有同域名或者制定域名下的页面可以调用，这样相对来说更安全、图片也可以防盗链。跨域限制一般只在浏览器端存在，对于服务端或iOS、Android等客户端是不存在的。

我们注意到后端程序其实是可以处理跨域问题，使用的方法是CORS(稍微会后详细文章介绍CORS)。那么如果只通过前端代码或者配置前端的运行环境如何解决跨域问题？

1. JSONP
2. 使用代理

JSONP是使用了标签的特性：可以加载非同源策略的特性实现回调函数处理返回数据。由于我们开发的是SPA应用，在组件内无法直接使用

在app.vue中引入该组件（同title.vue、count.vue引入方式一样），打开浏览器效果如下：

屏幕快照 2018-07-30 下午1.51.27.png

注意：代理图片可能会由于网络原因导致加载时间过长。
至此，我们实现了如何使用Node.js的request进行代理以解决跨域问题的问题。
完整代码github地址：https://github.com/zhiyuanMain/zhihu-daily

---

1. 域名、协议、端口号至少一个不同即违背同源策略，那么在ajax访问的时候就会出现跨域问题。 ↩