跨域的意义

 

目前知道，跨域有三种解决办法，

第一jsonp，这个感觉很麻烦，不学。

第二，cros，这个主要是后端服务器开始accessControlAllow origin，它开启几个不同源的http地址，那么那几个地址就可以跨域请求自己网站的数据了。

第三：前端使用webpack代理，如果是这样的化，那浏览器跨域岂不是毫无意义，因为我可以使用webpack完全代理，想请求谁就把自己的源伪装成谁。

但是，webpack是一个打包工具，你在测开发的时候，可以使用webpack-dev-server去代理，但是生产环境肯定就没法用了，所以生产环境还是cros，让后端去解决去开放前端服务器的地址；

但是如果调用的是别的公司的api，那不可能是别的公司的后端去帮你修改cros吧。

所以使用nginx，反向代理我们的前端服务器，让它同源发送请求到后端服务器；或者反向代理我们的后端服务器让他和前端页面所在服务器同源；

 https://blog.csdn.net/BiYvGe/article/details/122495773

 https://zhuanlan.zhihu.com/p/372207003

 

 

二、webpack的devserver的proxy

2.1代理解决跨域的原理

我们开启了webpack的devServer，如果某个url通过正则被web服务器捕获到到，那么这个url就会访问我们的web服务器，然后web服务器代理我们的真实服务器去访问targetr服务器，再将结果返回； 

https://blog.csdn.net/weixin_43706224/article/details/126379448

对devserver的proxy解释的非常好

 

1.浏览器是同源的，但是服务器不是同源的。
所以我们可以通过devserver开启一个web服务器，然后这个web服务器的Access-Control-Allow-Origin设置为*，那么浏览器向这个web服务器请求资源就不受跨域限制了。

然后我们配置的proxy{url:***, port:4000}，
web服务器将会去向真正的后端服务器(端口号4000)请求资源，服务器之间是没有同源策略这一说的，然后web服务器请求到资源后再返回给浏览器请求即可。

 

 

那么智运网门户项目，为什么不产生跨域问题？

我觉得应该是后端服务器的Access-Control-Allow-Origin做了设置，所以各种xhr的请求不需要经过web服务器代理转发，直接发送到后端服务器即可，并且不会产生跨域。
不信的话，我们可以直接在浏览器url中输入126:13220这个url，看看会不会有跨域限制，如果没有，那肯定是后端不限制了。

 

2.2什么样的请求才会被proxy代理?

axios(http:192.168.12.126:13220)这个url，这种形式的应该不会经过代理，
那么什么形式的网络请求会经过axios？

https://blog.csdn.net/Liu_yunzhao/article/details/90520028

这篇文章讲的很好，到底什么样的请求才会被代理。
所以说，axios(http:192.168.12.126:13220)这种形式会不会被代理，要看后面的path是否符合proxy的路径，如果符合就会被代理。

 

 

 

 

 

参考: