vue项目的跨域设置

在前端开发中,“跨域”是绕不过去的,了解跨域之前,先要知道浏览器的同源策略

同源策略:请求的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服务将你的请求做了一个代理,然后,请记住这句话,你就豁然开朗了:

同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略。

    原文作者:lovelytong
    原文地址: https://www.jianshu.com/p/b5ca4c4e3a37
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞