一、开发环境的跨域

浏览器请求前端开发服务器，请求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.com/，就会访问到真实服务器，比如说阿里云或腾讯云上面，然后服务器会给一个页面，这个过程和前面访问开发服务器是一样的，这个页面里面也有js、css，拿到之后，里面有ajax请求，它请求的还是这个真实服务器，所以他就没有跨域了，这个服务器即能够给你页面又能给你ajax请求的数据。

第二种情况：

       项目完成以后将打包好的html、css、js单独放到一个服务器，而我们的数据服务器是另外一个，这种情况有跨域。
       浏览器请求地址比如http://www.my-site.com/这个网站，请求的是静态资源服务器，可能是一个cdn,总之就是一个中间服务器；浏览器拿到这个页面后，也要请求css、js，运行js里面ajax请求的是另外的一个网站，也就是数据服务器里面的数据，数据在另外一个服务器上，这就产生了跨域。
       但是这种情况前端开发者不用担心，后端开发者会处理，比如后端设置允许请求http://www.my-site.com/这个网站，浏览器看到之后，就会接受数据，也不会产生跨域问题。
其实就目前而言，生产环境里面一般是不会产生跨域问题的。

如何解决开发里面的跨域问题？

       浏览器先请求开发服务器，拿到文件后，这时js如果如果跨域请求不到(例如"https://www.baidu.com/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数据？

浏览器跨域问题(详解)相关推荐

proxytable代理不生效_proxyTable代理跨域使用详解
这次给大家带来proxyTable代理跨域使用详解,proxyTable代理跨域使用的注意事项有哪些,下面就是实战案例,一起来看一下. 什么是代理跨域浏览器之间有同源策略,出于安全考虑不同域之间不允 ...
jQuery中getJSON跨域原理详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解前几天我再开发一个叫河蟹工 ...
SpringBoot—CORS跨域问题详解和解决方案
关注微信公众号:CodingTechWork,一起学习进步. 引言在前后端开发过程中,遇到过一种错误,类似于报错: Access to XMLHttpRequest at 'http://127 ...
gorilla websocket无法跨域_聊聊浏览器同源策略与跨域方案详解
开发出高性能的 Web 应用固然重要,但安全问题也不容小觑.本文我们继续以 HTTP 为线索,展开来讲一讲浏览器安全相关的同源策略. 浏览器的同源策略(Same Origin Policy) 源(Or ...
vue-admin-template解决跨域问题详解
vue-admin-template入门详解(后端springboot+sprngsecurity+jwt+redis) 自&如 2020-05-10 23:25:09 1232 收藏 10 ...
vue如何配置服务器端跨域_客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解...
本篇博客主要说明: 前后端框架(本例中是vue和koa)如何发送请求?获取响应? 以及跨域问题如何解决? vue部分: import App from './App.vue' import Axios ...
jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
AJAX请求和跨域请求详解（原生JS、Jquery）
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
web开发的跨域问题详解
2019独角兽企业重金招聘Python工程师标准>>> 本文由云+社区发表做过 web 开发的同学,应该都遇到过跨域的问题,当我们从一个域名向另一个域名发送 Ajax 请求的时候, ...

浏览器跨域问题(详解)

一、开发环境的跨域

二、为什么生产环境中没有跨域？

生产环境下分两种情况。

如何解决开发里面的跨域问题？

浏览器跨域问题(详解)相关推荐

最新文章

热门文章