你肯定听过 “跨域” 这词儿，对？即使咱们在使用 vue.js 的过程中也常常遇到这个问题。别慌，我来给你说说 vue.js 2.0 是怎么解决跨域问题的。
首先，得知道什么是”跨域”问题咯。搞网页编程的小伙伴应该都明白，网页上的小东西要互相说话就得按规矩来。这就是我们常说的”同源策略”，简单说就是看别的网站时，网址、IP地址和使用的端口都得相同，否则就有可能遇到”跨域”问题烦你。举个例子，比方说A网站想看看B网站的东西，可B不是A网站的亲戚，浏览器就会直接拒绝访问。
问题又来！如何对付这个跨域问题？别急，咱们的代理服务器可以搞定！在Vue.js 2.0中，只要调整webpack-dev-server的proxyTable设置，创建一个代理服务器就能轻松搞定。再也不用担心跨域的烦恼，在家写作也能游刃有余，轻松面对各种挑战！
import axios from 'axios'
axios.get('http://localhost:8080/api/data')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
来聊聊跨域问题呗，这个为什么这么重要呢?比如像Vue.js 2.0这种专攻单页网站的，我们就可以在家里用node.js建自己的项目。然后到测验阶段，咱们得用到人家的fetch啊ajax这些东西，让后端服务器给咱们返回来json数据。但是如果跨域处理不好的话，浏览器可就不认账，一下子给你冒出来个错误(弹窗)。
proxyTable: {
'/api': 'http://localhost:9000'
}
教教你怎么弄代理服务呗，就用咱的Vue.js2.0项目来讲讲看。首先得一开始就在项目里创建一个vue.config.js文件，这个就是用来设定开发服务器的。然后，就根据后端API的连接地址来确定代理目标地址，比如说设为9000就好了。别忘了还要把changeOrigin改成true，不然咱们的网页就没法跨域了。
你之前不是问能不能直接在前端随便打开网页吗？告诉你个简单办法，就是用Webpack DevServer给它设置一个爬虫（Proxy Table）参数，这样就可以无障碍地跨站浏览。
// 代码文件：vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:9000', // 代理目标地址
pathRewrite: { '/api': '' }, // 请求路径重写
changeOrigin: true, // 允许跨域
},
},
},
}
简单来说，要解决跨域问题的话，只要搞个代理服务器就行！这样你的前端网页就能随意访问其他网站了。不仅便捷还能防误撞和流量限制。你在开发vue.js应用时，可别忽视跨域问题！今天咱们就来聊聊这个话题，怎么用代理服务器搞定它！浏览器的同源限制这东西，让代理服务器帮帮忙，轻松接入其它网站没毛病。编程时千万别忘了这点，保证应用正常运行哟。如果还有疑问，或者想分享经验的话，请留言告诉我大家给我点赞也是对我最大的支持，多谢！
评论0