项目出现跨域问题，如何解决

Posted 2023-02-16 TGB-Earnest

现象

昨天在做下载图片的时候，出现下图的现象. 昨天在做下载图片的时候，出现下图的现象.

后端数据库存储的是图片的url，要根据这个url请求图片服务器得到图片进行下载。

为什么会出现跨域？

像上面的情况就会出现跨域，但是这个请求已经发出去了。服务端也就收到并处理了，但是返回的响应结果不是浏览器想要的结果，所以浏览器将这个响应的结果给拦截了，是浏览器的同源策略。

浏览器的同源策略(什么是同源策略)

如果两个URL都 协议、域名、端口三者相同即为同源

有哪些是不受同源策略限制
● 页面上的链接，比如a链接。
● 重定向
● 表单提交
● 跨资源的引入，比如：script ，img , link , iframe

如何解决跨域

CORS 解决跨域

CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）
它允许浏览器向跨域服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制
在b.com里面添加响应头声明允许a,com访问，代码：

	Access-Control-Allow-Origin: http://a.com

然后a.com就可以用ajax获取b.com里的数据了

具体到Java项目里面

使用Filter方式进行设置
使用Filter过滤器来过滤服务请求，向请求端设置Response Header(响应头部)的Access-Control-Allow-Origin属性声明允许跨域访问。

@WebFilterpublic class CorsFilter implements Filter       
@Override    
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException           HttpServletResponse response = (HttpServletResponse) res;          response.setHeader("Access-Control-Allow-Origin", "*");          response.setHeader("Access-Control-Allow-Methods", "*");          response.setHeader("Access-Control-Max-Age", "3600");          response.setHeader("Access-Control-Allow-Headers", "*");        response.setHeader("Access-Control-Allow-Credentials", "true");        chain.doFilter(req, res);        

同理也可以在nginx，网关上面解决。但都是设置跨域资源共享，只是实现方式不同。

JSONP解决跨域

什么是 JSONP，举个例子，就是 http://a.com/jsonp.html 想要获取 http://b.com/main.js 的数据，这个时候由于浏览器同源策略，是获取不到数据的，所以我们可以在 http://a.com/jsonp.html 创建一个 script 脚本，http://b.com/main.js?callback=xxx。在main.js中调用这个回调函数xxx，并且以JSON数据形式作为参数传递，完成回调。我们来看看代码：

// a.com/jsonp.html中的代码
	  function addScriptTag(src)  
	       var script = document.createElement('script'); 
	       script.setAttribute("type","text/javascript"); 
	       script.src = src; 
	      document.body.appendChild(script);
	  
	  window.onload = function ()  
	      addScriptTag('http://b.com/main.js?callback=foo');
	   //window.onload是为了让页面加载完成后再执行
	  function foo(data)  
	        console.log(data.name+"欢迎您");
	  ;
	 
	//b.com/main.js中的代码
	foo(name:"hl")

存在以下几点问题：
● 只能使用 GET 请求方式，无法使用 POST 请求方式。
● 可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题。