<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p> 讯享网
开发项目的时候因为浏览器同源策略的限制，经常会遇到跨域问题，本篇文章对常见的跨域解决方案做一个记录。
之所以产生跨域主要是因为浏览器同源策略的限制。
同源策略，它是由NetSpace提出的一个著名的安全策略。
当一个浏览器的两个tab页中分别打开来自百度和谷歌的页面，当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
- 协议：http
- 域名：子域名www，主域名aaa.com
- 端口：8080
从一个域名的网页去请求另一个域名的资源时，协议，域名，端口任意不同，都会出现跨域问题。
http://www.aaa.com:8080——>http://www.aaa.com:8080：同域访问
http://www.aaa.com:8080——>http://www.bbb.com:8080：跨域访问
尤其是在前后端分离的开发模式下，跨域请求是避免不了的。
下面我们以一个实际功能为例：用户输入用户名密码，发往服务端验证。
讯享网
因为浏览器同源策略的限制，在浏览器控制台提示我们：
Access to XMLHttpRequest at ‘http://192.168.1.10:7080/tick-tack/login’ from origin ‘http://192.168.1.10:7060’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
我们还可以在Network里看到，浏览器在发送我们输入的用户名，密码等数据之前，还发送了一次OPTIONS的请求，这是浏览器自动发送的，为了验证是否允许跨域访问。
我们已经知道，浏览器在发送请求之前会先发送一个OPTIONS请求，来校验是否允许跨域访问，校验的结果存放在头信息的Access-Control-Allow-Origin，因此解决跨域也就是设置头部信息。有四种方法解决跨域。
我们可以在特定的某些接口加上@CrossOrigin注解，表示该接口允许跨域访问。注：未加该注解的接口仍不允许跨域访问
讯享网
@CrossOrigin注解中的origins还可设置域名，表示只有该域名访问时允许跨域，如：@CrossOrigin(origins =“http://localhost:7060”)；
若origins未设置值，表示所有域名都可以跨域访问该接口
若项目中所有接口都允许跨域访问，可增加全局过滤器允许跨域访问。
讯享网
说明： 文章中很多地方为了方便，Access-Control-Allow-Origin设置成了，这个在开发测试的时候可以这么设置，但如果是生产环境，建议不要设置成，最好是允许哪些域名访问就设置哪些，毕竟限制域名还是很有必要的。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/150671.html