#跨域问题解决方案
最近自己写了一个js组件,该js组件是提供给第三方使用的,而js组件中涉及了ajax请求,于是乎就出现了跨域请求问题。下面记录一下自己的解决路程。
##什么是跨域
参考:跨域请求详解
个人理解:我理解的跨域就是,两个不同的ip或者域名,进行访问和数据交换,此时如果不做处理,便会发生跨域请求问题。详细解释看上面链接。
我自己就是因为js提供给其他服务器进行调用,而我的js里面设计到一个ajax请求,所以在第三方服务器调用我的js进行操作的时候,就设计到了两个服务器之间的数据交互问题,即跨域问题。
##定位跨域问题
了解了什么是跨域,那么怎么定位自己的错误是跨域导致的呢?我一般是根据报错来定位。调用js时,我的报错如下:
如果你也出现报错这个,恭喜你,你确实跨域无疑了。那么如何解决这个问题呢,网上各种答案都有,我这里总结一下。便于以后自己的出现同样问题的时候,能够及时找到最优的答案。
##跨域解决方案有哪些
目前我了解的解决跨域的几种方式:手写过滤器
,手写拦截器
,jsonnp
,注解方式
,配置nginx反向代理
,共五种解决方式。
###1. 手写过滤器实现(我用的这种)
通过过滤器开放需要访问的接口(我用的这种,推荐)
(1)写一个过滤器:
package com.ninesword.utils;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
@Component
public class CrossFilter implements Filter {
private static Logger logger = LoggerFactory.getLogger(CrossFilter.class);
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">init</span><span class="token punctuation">(</span>FilterConfig filterConfig<span class="token punctuation">)</span> <span class="token keyword">throws</span> ServletException <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">doFilter</span><span class="token punctuation">(</span>ServletRequest request<span class="token punctuation">,</span> ServletResponse response<span class="token punctuation">,</span>
FilterChain chain<span class="token punctuation">)</span> <span class="token keyword">throws</span> IOException<span class="token punctuation">,</span> ServletException <span class="token punctuation">{</span>
logger<span class="token punctuation">.</span><span class="token function">debug</span><span class="token punctuation">(</span><span class="token string">"跨域请求进来了。。。"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
HttpServletRequest httpServletRequest <span class="token operator">=</span> <span class="token punctuation">(</span>HttpServletRequest<span class="token punctuation">)</span> request<span class="token punctuation">;</span>
httpServletRequest<span class="token punctuation">.</span><span class="token function">getSession</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
HttpServletResponse httpResponse <span class="token operator">=</span> <span class="token punctuation">(</span>HttpServletResponse<span class="token punctuation">)</span> response<span class="token punctuation">;</span>
httpResponse<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">"Access-Control-Allow-Origin"</span><span class="token punctuation">,</span> <span class="token string">"*"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
httpResponse<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">"Access-Control-Allow-Methods"</span><span class="token punctuation">,</span> <span class="token string">"*"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
httpResponse<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">"Access-Control-Max-Age"</span><span class="token punctuation">,</span> <span class="token string">"3600"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
httpResponse<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">"Access-Control-Allow-Headers"</span><span class="token punctuation">,</span>
<span class="token string">"Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
httpResponse<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">"Access-Control-Allow-Credentials"</span><span class="token punctuation">,</span> <span class="token string">"true"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
httpResponse<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">"Content-type"</span><span class="token punctuation">,</span> <span class="token string">"application/json"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
httpResponse<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">"Cache-Control"</span><span class="token punctuation">,</span> <span class="token string">"no-cache, must-revalidate"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
chain<span class="token punctuation">.</span><span class="token function">doFilter</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span> httpResponse<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
在web.xml中配置过滤器和需要过滤的接口
<!-- 添加过滤器过滤跨域请求 -->
<filter>
<filter-name>cors</filter-name>
<!-- 这里配置上面刚刚设置的java过滤器文件 -->
<filter-class>com.ninesword.utils.CrossFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<!-- 这里配置你需要进行跨域的接口,*代表jsForSdp当前路径下所子有路径 -->
<url-pattern>/jsForSdp/*</url-pattern>
</filter-mapping>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
经过以上配置,已经可以成功跨域了,亲测有效哦。
2.使用spring拦截器解决跨域问题
这个方法,是一个大佬推荐的,我没有试过。这里推荐文章:[java-拦截器实现跨域支持](https://blog.csdn.net/zpf0918/article/details/52624813)
- 1
3.jsonnp实现(仅适用GET请求,不推荐)
网上各种针对jsonnp实现跨域的文章很多,但是这种,据说只对get请求有效,不推荐。我用的是原声js写的组件,jsonnp常见于jquery ajax中,所以,这里无法解决我的问题,还是说下它怎么实现的吧。
使用jsonnp还是很简单的,如果你用的是jquery的话就更好了。
$.ajax({
url: "你的url",
type: 'GET',
dataType: 'JSONP',//重点在这里,加上这个属性就可以跨域请求了
success: function (data) {
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
4.注解实现
我的框架是ssh。这里有注解可以解决跨域问题,本人没有试过,但是确实简单有效。推荐链接:
springmvc @crossorigin跨域
5.配置nginx实现
这里个人推荐的还是第一种解决方式,经过验证确实有效。如果你有更好的方式或者见解,请留言。谢谢
转载
https://blog.csdn.net/qq_23832313/article/details/81946838?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param