浏览器跨域问题(详解)

一、开发环境的跨域

       浏览器请求前端开发服务器，请求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数据？