js如何解决跨域问题，前端跨域的几种解决方式总结(推荐)
大家好，js如何解决跨域问题相信很多的网友都不是很明白，包括前端跨域的几种解决方式总结(推荐)也是一样，不过没有关系，接下来就来为大家分享关于js如何解决跨域问题和前端跨域的几种解决方式总结(推荐)的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！
如何用CORS来解决JS中跨域的问题
1、CORS的原理：CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域 AJAX请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
2、tomcat如何配置cors的跨域请求：
在tomcat中，有一个和cors相关的拦截器：CORS Filter
该过滤器可以通过添加必需的访问控制请求头Access-Control-*对象来进行跨域。同时还可以对一些请求进行拦截。如果请求是无效的，或者是不被允许的，该请求被拒绝或者禁止。
其在web.xml文件中的基本配置如下：
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>
,
</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>
GET,POST,HEAD,OPTIONS,PUT
</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>
Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin
</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>
Access-Control-Allow-Origin,Access-Control-Allow-Credentials
</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.preflight.maxage</param-name>
<param-value>10</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/wxrefund/*</url-pattern>
</filter-mapping>
3、cors.allowed.origins：允许访问资源的源列表。*表示任何来源都可以访问该资源。否则，只有配置的白名单的来源可以访问该资源，其中白名单用逗号隔开，如。
4、cors.allowed.methods：允许访问的http请求方法，如GET,POST,HEAD,OPTIONS,PUT等，方法名用逗号隔开。
5、cors.allowed.headers：在实际请求时可使用的请求头列表，用逗号隔开。如Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin。这些头也将返回作为访问控制的一部分。
前端跨域的几种解决方式总结(推荐)
搞大前端的，肯定都会遇到跨域问题的,虽然网上这方面的资料也很多，但我还是喜欢自己写一遍，自己理解过、总结过的东西才记得最深刻。
同源策略
JavaScript的同源策略，是由Netscape提出的一个著名的安全策略，为了阻止A站的JS去操作别的网站的数据。你想啊，你现在打开了浏览器，在一个tab窗口中打开了银行网站，在另外一个tab窗口中打开了一个恶意网站，而那个恶意网站挂了一个的专门修改银行信息的JavaScript，当你访问这个恶意网站并且执行它JavaScript时，你的银行页面就会被这个JavaScript修改（比如说获取你的卡号和密码，又或者是转账到黑客的账户上等等），后果会非常严重！而同源策略就为了防止这种事情发生，它规定了A网站下的JS文件只能操作A网站下的数据，不能去操作B网站的数据。
为了方便理解,我们把这个词拆分成同源和策略这2个词吧（原谅我，我就怕你不理解啊）。
所谓同源指的就是指资源是来自同一个源的。如果两个页面拥有相同的协议，端口号，和主机（包括子域名和主域名），那么这两个页面就属于同一个源。
所谓策略指的是可以做什么事情。同一个源下的JS可以操作同一个源下的数据。
举个例子来看看你理解了没有吧，看下面这个链接，协议是http协议，主机是store.company.com，端口号一般默认的都是80了。然后和下面的这个表中的各个URL进行比较，判断一下哪些是同源的，哪些不是同源的。
URL
结果
原因
同源
同源
非同源
协议不同
非同源
端口不同
非同源
主机不同
什么是跨域
跨域
跨域的解决方案
方案1-JSONP
JSONP是JSON with padding的简写。JSONP由两部分组成:回调函数和数据。
回调函数是客户端和服务端约定好一个函数名，一般在请求中指定。
数据是传入回调函数中的JSON数据。
JSONP是通过动态的
callback({"name":"michael"});
问题一：JSONP是需要动态创建script标签的，我们需不需要处理这些script元素？怎么处理？
问题二：JSONP请求的时候，服务器发生错误该怎么办，比如服务器崩掉，比如返回了404页面，前端该怎么处理这个错误，难道直接让它抛出么？
答案
JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求
JSONP的兼容性好，不需要XMLHttpRequest的支持
方案2-跨域资源共享CORS
跨域资源共享定义了在必须访问跨域资源的时，浏览器与服务器应该如何沟通。他的原理是使用自定义的 HTTP头部，让服务器与浏览器进行沟通，主要是通过设置响应头的 Access-Control-Allow-Origin来达到目的的。
方案3-document.domain
浏览器的同源策略使得不同域的框架是不能进行JS的交互操作的。比如：有一个页面是,在这个页面中还有一个，很显然，a.html与b.html是不同域的，所以我们无法通过在页面中书写js代码来获取iframe中的东西，但是，如果我们把这2个页面的document.domain都设置成相同的域名就可以了，需要注意的是，我们只能把document.domain设置成自身或更高一级的父域，且主域名必须相同。
使用条件
document.domain适用于不同子域的框架之间的交互。
方案4-window.name
window对象有个name属性，该属性有一个特征：即在一个窗口的生命周期内，窗口载入的所有页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。
方案5-window.postMessage
window.postMessage（message,targetOrigin）方法，可以用来向其他的window对象发送消息，无论这个window对象是属于同一个源还是不同源
javascript 跨域调用js文件问题...
三种方法实现js跨域访问
1.基于iframe实现跨域
基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点，也就是两个页面必须属于一个基础域（例如都是xxx.com，或是xxx.com.cn），使用同一协议（例如都是 http）和同一端口（例如都是80），这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数，代码如下：
页面一代码：
<html>
<head>
<script>
document.domain="xx.com";
functionaa(){
alert("p");
}
</script>
</head>
<body>
<iframesrc=""id="i">
</iframe>
<script>
document.getelementbyid('i').oncg=function(){
vard=document.getelementbyid('i').contentwindow;
d.a();
};
</script>
</body>
</html>
页面二代码：
<html>
<head>
<script>
document.domain="xx.com";
functiona(){
alert("c");
}
</script>
</head>
<body>
</body>
</html>
这时候父页面就可以调用子页面的a函数，实现js跨域访问
2.基于script标签实现跨域
script标签本身就可以访问其它域的资源，不受浏览器同源策略的限制，可以通过在页面动态创建script标签，代码如下
varscript=document.createElement('script');
script.src="*.js";
document.body.appendChild(script);
这样通过动态创建script标签就可以加载其它域的js文件，然后通过本页面就可以调用加载后js文件的函数，这样做的缺陷就是不能加载其它域的文档，只能是js文件，jsonp便是通过这种方式实现的，jsonp通过向其它域传入一个callback参数，通过其他域的后台将callback参数值和json串包装成javascript函数返回，因为是通过script标签发出的请求，浏览器会将返回来的字符串按照javascript进行解析执行，实现了域与域之间的数据传输。
jquery中对jsonp的支持也是基于此方案
3.后台代理方式
这种方式可以解决所有跨域问题，也就是将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟http请求去访问其它域，再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是js文件都可以实现跨域
