跨域问题（纯前端解决 纯后端解决 webservice解决）

青年：最近项目中遇到了跨域问题，我这边解决的方式是jsonp前后端配合，大师是否还有其他的解决方式？

禅师：跨域是浏览器对同源策略的保护，主流的方式的确是需要前后端配合解决，但是业务需求有千百种，解决方法也应适应业务需求。如果后端服务本身是调取的第三方服务，这种情况下只能纯前端解决了。

青年：纯前端解决?域名不同，协议不同，端口不同都会产生跨域问题，摆在前端面前的就是这几种情况之一，这不就是薅着头发离地吗？

禅师：年轻人不要着急，你确实说出了跨域的直接原因，如果我们把请求的接口地址改成本地的同域名同协议同端口，还会出现跨域问题吗？

青年：这不就是本地前端调用本地接口嘛，当然不会有跨域问题，难道为了解决跨域问题就要把我们的前端项目部署到第三方的服务器下，这能是解决办法吗？

禅师：当然不能这样瞎搞，其实我们可以使用反向代理，将第三方的接口地址映射成本地的地址，前端只要调用本地的地址，就可以请求到第三方的数据了，比如，nginx提供的反向代理服务就很稳定，只要修改下nginx.conf文件就可以，如图：

本地调用的服务都走localhost:81这个地址，访问第三方接口可走localhost:81/myhik,访问本地其他资源走localhost:81/即可，最后输入命令nginx -s reload 重新加载下就可以。

青年：确实好很多，如果项目经理就不喜欢用nginx怎么办？

禅师：那就需要用另一种解决方法了，比如，在后端通过webservice向第三方请求服务，java后端是没有跨域问题存在的。

青年：这也是解决方法。如果项目经理既不想纯前端解决，也不想通过后端webservice调用，怎么办？

禅师：这种需求看似无理，有点类似五彩斑斓的黑，其实也是可以想方法解决的。比如，项目经理对第三方服务有很大的自主权，那么就可以在第三方服务的pom.xml中加点依赖就可以，如图：

<!-- 跨域开始 --><dependency><groupId>com.thetransactioncompany</groupId><artifactId>cors-filter</artifactId><version>1.7</version></dependency><dependency><groupId>com.thetransactioncompany</groupId><artifactId>java-property-utils</artifactId><version>1.9</version></dependency><!-- 跨域结束 -->

在web.xml中添加如下内容:

<filter><filter-name>CORS</filter-name><filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class></filter><filter-mapping><filter-name>CORS</filter-name><url-pattern>/*</url-pattern></filter-mapping>

java-property-utils-1.9.jar和cors-filter-1.7.jar也可以（点击下载）

青年：确实很好，如果项目经理既不想纯前端解决也不想后端webservice调用，更不想修改第三方服务，那该怎么办？

禅师：你说什么我没听清？

青年：我是说，既不想纯前端解决也不想后端webservice调用，更不想修改第三方服务，那该怎么办？

禅师：不是，上一句！

青年：跨域问题该怎么解决？

禅师：不会！

总结：

1.nginx反向代理，纯前端解决跨域问题

2.webservice调用第三方服务，提供本地前端接口，解决跨域问题。

3.服务导入jar包依赖，纯后端解决跨域问题。

如果觉得《跨域问题（纯前端解决 纯后端解决 webservice解决）》对你有帮助，请点赞、收藏，并留下你的观点哦！