在前端开发中,“跨域”是绕不过去的,了解跨域之前,先要知道浏览器的同源策略
同源策略:请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同。
当你的请求地址和浏览器上的url地址不一样的时候,由于同源策略,将请求不到资源,将无法“跨域”获取资源。
我的理解是:跨域这个问题只存在于页面的异步请求之中,比如ajax,vue中的axios等,因为同步请求,直接就在浏览器的地址栏将目标地址打开了,不存在请求地址与浏览器地址不一致的情况。
但也有特殊情况,比如img标签和script标签的src属性,是可以获取到外部资源,天生可以跨域。
解决跨域有很多种办法,最近的项目中使用的办法我认为是最好的一种,即:配置webpack中的proxyTable。
话不多说,请看代码:
proxyTable: {
'/list': {
target:'http://api.xxxxxxxx.com',
pathRewrite: {'^/list':'/list' }
}
}
此时,从前端向后台请求“/list”这个地址的时候,在浏览器看到的url前缀是你本地运行服务”localhost:XXXX”,但实际上,你请求的地址是’http://api.xxxxxxxx.com’。
为什么这样做可以成功跨域呢?其实,是因为你本地的node服务将你的请求做了一个代理,然后,请记住这句话,你就豁然开朗了:
同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略。