5种处理js跨域问题方法汇总

JavaScript跨域处理方案概述

此前遇到一个跨域场景，采用JSONP方式得以解决（参考链接：https://www.jb51.net/article/57889.htm）。

近期对此进行了整理归纳：

JSONP与script标签跨域

1. JSONP方案。

在Ajax请求中将dataType设置为jsonp。此方式要求服务端返回格式为callback([json-object])。若服务端直接返回普通JSON对象，Chrome浏览器控制台会提示"Uncaught SyntaxError: Unexpected token"错误，Firefox浏览器则显示"SyntaxError: missing ; before statement"错误。

iframe跨域调用

2. iframe跨域方案。

在页面中嵌入一个iframe元素，当需要发起GET请求时，将iframe的src属性设置为目标GET请求的URL，即可触发请求调用。

var url = "http://xxx.xxx.xxx?p1=1&p2=2";
$("#iframe").attr("src", url);//跨域，使用iframe

相比JSONP，iframe方式更具优势，它不仅支持HTTP请求，还能实现跨域环境下的JavaScript调用。

3. 利用script元素的src属性处理。

iframe、img、style、script等元素的src属性均能直接向不同域请求资源。JSONP本质上是利用script标签进行跨域请求的简化实现，因此同样需要服务端返回callback...形式的响应。

var url="http://xxx.xxx.xxx?p1=1";
var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);

服务端代理与Flash方案

4. 通过服务器端使用GET请求处理。

若业务逻辑未强制要求在前端处理，可在服务端进行封装并发起调用，从而解决跨域问题。根据是否需要获取返回值，可选择同步或异步模式编写代码。

private static void CreateGetHttpResponse(string url, int? timeout, string userAgent, CookieCollection cookies)
        {
if (string.IsNullOrEmpty(url))
            {
throw new ArgumentNullException("url");
            }
var request = WebRequest.Create(url) as HttpWebRequest;
request.Method = "GET";
if (!string.IsNullOrEmpty(userAgent))
            {
request.UserAgent = userAgent;
            }
if (timeout.HasValue)
            {
request.Timeout = timeout.Value;
            }
if (cookies != null)
            {
request.CookieContainer = new CookieContainer();
request.CookieContainer.Add(cookies);
            }
request.BeginGetResponse(null,null);//异步
//return request.GetResponse() as HttpWebResponse;
        }

5. Flash跨域方案。

该方案较为前沿，需进一步研究。

总结：上述五种方法为常见的JS跨域处理手段。最后一种方式相对复杂，待深入研究后再行补充。