admin管理员组文章数量:1529453
一、开发环境的跨域
浏览器请求前端开发服务器,请求css、js,前端开发服务器会返回一个页面,浏览器会渲染页面,请求到的js里面会有一个ajax请求,这个请求的是另外一个服务器。
一般来说开发阶段会请求一个后端测试服务器,后端测试服器是后端开发人员开发好的里面都是测试数据,后端会给一个地址,比如http://test-data:3000/api/news, 一般不会给你真实的服务器,怕你在里面乱搞,如果你删除添加一些东西。
由于我们目前的地址比如说是http://localhost:8080 或 file://localhost:8080 , 我们在这样的地址下发送ajax请求,域名或者端口号有不一样的,肯定会涉及到跨域,此时测试服务器也会给你数据,但是浏览器发现有跨域,为了安全,会阻止被js拿到,并且会报错,这就是跨域产生的过程,是在开发环境中产生的跨域。
开发环境有跨域,那么将来在生产环境,真正部署好了,给用户访问的时候有没有跨域呢?
其实那个时候一般不会有跨域,因为有些公司服务器的结构不一样。
二、为什么生产环境中没有跨域?
生产环境下分两种情况。
第一种:
将来等项目开发完成后,会打包到dist目录,成HTML、css、js。将它交给后端开发者或者自己上传到服务器去,服务器不仅能够拖载静态资源,开能够提供一些API。
将来部署好以后,比如用户访问这个地址http://www.my-site/,就会访问到真实服务器,比如说阿里云或腾讯云上面,然后服务器会给一个页面,这个过程和前面访问开发服务器是一样的,这个页面里面也有js、css,拿到之后,里面有ajax请求,它请求的还是这个真实服务器,所以他就没有跨域了,这个服务器即能够给你页面又能给你ajax请求的数据。
第二种情况:
项目完成以后将打包好的html、css、js单独放到一个服务器,而我们的数据服务器是另外一个,这种情况有跨域。
浏览器请求地址比如http://www.my-site/这个网站,请求的是静态资源服务器,可能是一个cdn,总之就是一个中间服务器;浏览器拿到这个页面后,也要请求css、js,运行js里面ajax请求的是另外的一个网站,也就是数据服务器里面的数据,数据在另外一个服务器上,这就产生了跨域。
但是这种情况前端开发者不用担心,后端开发者会处理,比如后端设置允许请求http://www.my-site/这个网站,浏览器看到之后,就会接受数据,也不会产生跨域问题。
其实就目前而言,生产环境里面一般是不会产生跨域问题的。
如何解决开发里面的跨域问题?
浏览器先请求开发服务器,拿到文件后,这时js如果如果跨域请求不到(例如"https://www.baidu/s?rtt=1&bsst=1&cl=2&tn=news&ie=utf-8
")这个网站,这时js里面的ajax就不在跨域请求那个网站 ,而是转向请求开发服务器同样的地址(例如"http://localhost:8081/s?rtt=1&bsst=1&cl=2&tn=news&ie=utf-8
")。
然后给前端开发服务器设置功能,让它成为的代理,前端开发服务器会转发到后端的测试服务器,前端开发服务器是webpack搭建的,所以不会跨域。因为跨域是在浏览器端产生的,是浏览器为了安全才出来的这个跨域问题。所以只要是脱离浏览器环境,就不会产生跨域。
这时对于浏览器来说它请求的网站是自己的开发服务器,协议域名端口号都一样,所有就没有跨域。
为什么要mock数据?
版权声明:本文标题:浏览器跨域问题(详解) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1726723890a1082047.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论