何为跨域?
这就需要了解浏览器的同源策略,所谓同源是指 ‘协议+域名+端口’三者相同,而跨域就是非同源的请求
如何解决?
-
通过代理来避免,如使用nginx在后端转发请求,来避免前端出现跨域
在server块中增加
# 允许跨域请求的域,*代表所有 add_header 'Access-Control-Allow-Origin' *; # 允许带上cookie请求 add_header 'Access-Control-Allow-Credentials' 'true'; # 允许请求的方法 GET POST等 add_header 'Access-Control-Allow-Methods' *; # 允许请求的header add_header 'Access-Control-Allow-Headers' *;
-
使用jsonp
浏览器的同源策略不包含<script>、<img>、<iframe>这几个标签,而jsonp就是利用<script>标签跨域特性来进行的跨域数据访问,其原理是与服务器端约定好一个函数名,服务端接收到请求后,将返回一段JavaScript,在这段JavaScript代码中调用约定好的回调函数,并且将数据作为参数进行传递,当网页接收到这段JavaScript后,就会执行回调函数,数据就成功传输到客户端了
其缺点是只支持GET请求
-
在web项目中配置过滤器或拦截器来解决跨域
httpServletResponse.setHeader("Access-Control-Allow-Origin", origin); httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true"); httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS"); httpServletResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");