‘壹’ 如何解决前端跨域问题
可以使用服务器代理或者在后端设置允许跨域。
现在的项目一般是在后端设置允许跨域，前端在带有允许跨域的情况下，可以像没有跨域一样正常访问。
如果前端单独发布到服务器，也可以在服务器是设置代理，使用代理转发请求。
‘贰’ 如何解决IE浏览器跨域问题
工具：
IE浏览器
方法如下：
1、打开IE浏览器，在工具菜单下选择Internet选项，打开Internet选项卡
2、切换到安全选项卡下，点击可信站点，然后单击站点按钮
3、可信站点窗口输入网址到可信站点的区域，点击添加按钮，网址则会添加到网站列表下，最后关闭可信站点窗口
4、还是在安全选项卡下的可信站点，点击自定义级别
5、打开站点区域窗口，找到跨域浏览窗口和框架选择启用
6、在当前窗口中继续往下翻，通过域访问数据源也选择启用，点击确定关闭受信任的站点区域窗口
7、在Internet窗口也点击确定按钮，同时关闭浏览器
8、在请求的js脚本中添加是否允许跨域访问的权限，jQuery.support.cors默认值为true，则代表允许；反之，不允许。设置完成，重新打开浏览器验证即可。
‘叁’ 如何配置解决跨域的问题
方法/步骤
服务器端对于CORS的支持，是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问
打开控制面板，选择管理工具
选择iis
右键单击自己的网站，选择浏览
打开网站所在目录
用记事本打开web.config文件添加如图的一句话，保存，重启网站就好了，客户端直接用html5编辑，不用任何设置
‘肆’ 如何解决IE浏览器跨域问题
工具：
IE浏览器
方法如下：
1、打开IE浏览器，在工具菜单下选择Internet选项，打开Internet选项卡
2、切换到安全选项卡下，点击可信站点，然后单击站点按钮
3、可信站点窗口输入网址到可信站点的区域，点击添加按钮，网址则会添加到网站列表下，最后关闭可信站点窗口
4、还是在安全选项卡下的可信站点，点击自定义级别
5、打开站点区域窗口，找到跨域浏览窗口和框架选择启用
6、在当前窗口中继续往下翻，通过域访问数据源也选择启用，点击确定关闭受信任的站点区域窗口
7、在Internet窗口也点击确定按钮，同时关闭浏览器
8、在请求的js脚本中添加是否允许跨域访问的权限，jQuery.support.cors默认值为true，则代表允许；反之，不允许。设置完成，重新打开浏览器验证即可。
‘伍’ 使用nginx代理解决跨域问题
先说说跨域这事情吧。早在13年，我刚接触前端开发的时候就遇到了跨域，那时候刚开始流行前后端分离。解决跨域就是直接用get jsonp。还是小白的我，也没有去想跨域的其它解决方式和为什么要采用这种解决方式。
最近，做一个二次开发的项目，也碰到了用网页请求http post，浏览器跨域，不能获取返回数据的问题，所以再次来梳理下这个跨域，为什么最后选择了nginx代理。
首先，什么是跨域呢？首先需要了解的是同源和跨源的概念。对于相同源，其定义为：如果协议、端口（如果指定了一个）和主机对于两个页面是相同的，则两个页面具有相同的源。 只要三者之一任意一点有不同，那么就为不同源。 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。当一个资源从与该资源本身所在的服务器的域或端口不同的域或不同的端口请求一个资源时，资源会发起一个跨域 HTTP 请求。跨域不一定是浏览器限制了发起跨站请求，而也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。 简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。
跨域的解决方案也有很多种。
类型一：有些浏览器可以设置 ，降低它的安全性。但是对于一个网站，要求设置浏览器是不切合实际的。
类型二：直接用form方式 ，这种情况下不是ajax请求，而是直接访问目标地址了，不存在跨域问题，但是这个页面已经跳转了。而我们想实现的只是取另外一个地址的数据到本地显示而已。
类型三：服务端语言是能够处理的情况下。
1、CORS 是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。跨域资源共享（ CORS ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。其需要服务端和客户端同时支持。
对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。 Access-Control-Allow-Origin 该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。 Access-Control-Allow-Credentials 该字段可选。 Access-Control-Expose-Headers 该字段可选。
可以说这种办法主要在header上下功夫，设置Access-Control-Allow-Origin为所有*允许访问。虽然说它支持所有的请求方式，post，delete，put等等，但是它不能兼容ie6，7等等。
例如下图的nodejs express 例子：
2、服务端的http ajax请求全部改为 get jsonp方式 。该方式能够兼容老式浏览器。
3、iframe window.name 这种传值得方式很巧妙，兼容性也很好。但是在要访问数据的地址那个服务器要有一个空的中间页面拿来用。
4、postMessage ， html5 window.postMessage。 同iframe window.name有点像，也是需要服务端有个空的html拿来接收数据。而且现在的postMessage兼容性也不好。
5、document.domain 修改为顶级域名。
6、 WebSocket ，协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
类型四：不是简单的前后端。假如有个第三方的api，自己有一个网站前端，一个网站后端。
1、自己的网站端和后端源码放在同一个服务端口和目录下，不存在跨域。当直接用网站前端的http访问第三方api，浏览器跨域。此时，改为由网站后端的服务端语言访问，做个中间人，将访问的数据给网页前端。
2、网站前端和后端不是同源的，采用以上的跨域方案，譬如CORS。同样的网站后端做中间人，访问第三方api，再转给网页前端。
3、使用nginx 反向代理解决跨域问题。 网站前端访问nginx服务的地址，nginx设置代理地址为访问第三方api地址，当访问代理地址的时候，浏览器访问的是nginx服务的地址，实际是访问第三方api地址。
注意：此时，如果目录下有个proxy.html,因为设置代理地址是/proxy，碰到这个地址就被转到”https://192.168.18.175:8088/api/v1.0.2/“，所以要访问proxy.html是访问不到的。
4、使用nginx代理地址是解决生产环境发布的问题了，那么我在开发的时候使用angular这样需要打包的框架怎么办呢。当然在开发环境下，angular也是由类似代理地址的解决方案的。
（1）创建配置代理文件：假设后端服务的访问地址为http://192.168.19.175:8088/api/v1.0.2/login，我们可以创建一个proxy.conf.json文件，放在package.json同目录下。
（2）改写package.json文件 ，采用--proxy-config命令（angular自带的命令）。
(3)ajax访问代理地址
此时， 执行 npm start ，即可发现，浏览器访问http://localhost:4200/api/v1.0.2/login 的同源地址，实际上是访问http://192.168.18.175:8088/api/v1.0.2/login.
angular在开发环境下代理地址的方法类似在生产环境下使用的nginx代理。但是测试angular是有一个/api代理地址的巧合。刚好第三方api上面的地址有个api，才能使用这个地址，并且能够简写一个api，才能成功访问，如果更改为其它的，譬如proxy，就测试失败。而且proxy.conf.json文件下的设置也只能是域名和端口。所以，本人测试，这或许是个巧合或者是缺陷。
五、其它
当然，跨域这个算是历史性的问题，以后也会存在这个问题。除了上面各种方法，以及根据各种方法使用的场合，还有许多其它的方法。例如各大流行框架react，vie应该也有像angular一样，能够处理跨域的开发环境方案，接下来，还是要继续学习和积累。
‘陆’ 如何解决跨域问题
打开IE浏览器，在工具菜单下选择Internet选项，打开Internet选项卡
切换到安全选项卡下，点击可信站点，然后单击站点按钮
可信站点窗口输入网址到可信站点的区域，点击添加按钮，网址则会添加到网站列表下，最后关闭可信站点窗口
还是在安全选项卡下的可信站点，点击自定义级别
打开受信任的站点区域窗口，找到跨域浏览窗口和框架选择启用
在当前窗口中继续往下翻，通过域访问数据源也选择启用，点击确定关闭受信任的站点区域窗口
在Internet窗口也点击确定按钮，同时关闭浏览器
在请求的js脚本中添加是否允许跨域访问的权限，jQuery.support.cors默认值为true，则代表允许；反之，不允许。设置完成，重新打开浏览器验证即可
‘柒’ 怎么设置chrome的跨域访问
方法/步骤
1,首先谷歌快捷方式上右击，在下拉列表中选择属性。
‘捌’ 遇上浏览器跨域问题怎么办
出于安全原因，浏览器禁止 Ajax 调用驻留在当前原点之外的资源。例如，当你在一个标签中检查你的银行账户时，你可以在另一个选项卡上拥有 EVILL 网站。来自 EVILL 的脚本不能够对你的银行 API 做出 Ajax 请求（从你的帐户中取出钱！）使用您的凭据。
跨源资源共享（CORS）是由大多数浏览器实现的 W3C 规范，允许你灵活地指定什么样的跨域请求被授权，而不是使用一些不太安全和不太强大的策略，如 IFRAME 或 JSONP。
Spring Framework 4.2 GA 为 CORS 提供了第一类支持，使您比通常的基于过滤器的解决方案更容易和更强大地配置它。所以 springMVC 的版本要在 4.2 或以上版本才支持 @CrossOrigin
1. controller 配置 CORS
1.1 controller 方法的 CORS 配置，您可以向 @RequestMapping 注解处理程序方法添加一个 @CrossOrigin 注解，以便启用 CORS（默认情况下，@CrossOrigin 允许在 @RequestMapping 注解中指定的所有源和 HTTP 方法）：
其中 @CrossOrigin 中的 2 个参数：
1.2 为整个 controller 启用 @CrossOrigin
在这个例子中，对于 retrieve() 和 remove() 处理方法都启用了跨域支持，还可以看到如何使用 @CrossOrigin 属性定制 CORS 配置。
1.3 同时使用 controller 和方法级别的 CORS 配置，Spring 将合并两个注释属性以创建合并的 CORS 配置。
1.4 如果您正在使用 Spring Security，请确保在 Spring 安全级别启用 CORS，并允许它利用 Spring MVC 级别定义的配置。
2. 全局 CORS 配置
JavaConfig
使整个应用程序的 CORS 简化为：
您可以轻松地更改任何属性，以及仅将此 CORS 配置应用到特定的路径模式：
如果您正在使用 Spring Security，请确保在 Spring 安全级别启用 CORS，并允许它利用 Spring MVC 级别定义的配置。
3. XML命名空间
还可以将 CORS 与 MVC XML 命名空间配置。
a) 如果整个项目所有方法都可以访问，则可以这样配置；此最小 XML 配置使 CORS 在 /** 路径模式具有与 JavaConfig 相同的缺省属性：
其中 * 表示匹配到下一层；** 表示后面不管有多少层，都能匹配。
如：
这个可以匹配到的路径有：
不能匹配的：
因为 * 只能匹配到下一层路径，如果想后面不管多少层都可以匹配，配置如下：
请求路径有 /api/，方法示例如下：
c) 如果使用 Spring Security，不要忘记在 Spring 安全级别启用 CORS：
4. How does it work?
CORS 请求（包括预选的带有选项方法）被自动发送到注册的各种 HandlerMapping 。它们处理 CORS 准备请求并拦截 CORS 简单和实际请求，这得益于 CorsProcessor 实现（默认情况下默认 DefaultCorsProcessor 处理器），以便添加相关的 CORS 响应头（如 Access-Control-Allow-Origin）。 CorsConfiguration 允许您指定 CORS 请求应该如何处理：允许 origins, headers, methods 等。
a) AbstractHandlerMapping 类的 setCorsConfiguration() 方法允许指定一个映射，其中有几个 CorsConfiguration 映射在路径模式上，比如 /api/**。
b) 子类可以通过重写 AbstractHandlerMapping 类的 getCorsConfiguration(Object, HttpServletRequest) 方法来提供自己的 CorsConfiguration。
c) 处理程序可以实现 CorsConfigurationSource 接口（如 ResourceHttpRequestHandler），以便为每个请求提供一个 CorsConfiguration。
5. 基于过滤器的 CORS 支持
1. 是 springMVC 的版本要在 4.2 或以上版本才支持 @CrossOrigin
2. 非 @CrossOrigin 没有解决跨域请求问题，而是不正确的请求导致无法得到预期的响应，导致浏览器端提示跨域问题。
3. 在 Controller 注解上方添加 @CrossOrigin 注解后，仍然出现跨域问题，解决方案之一就是：
在 @RequestMapping 注解中没有指定 Get、Post 方式，具体指定后，问题解决。
类似代码如下：
参考文章：
1. 官方文档 https://spring.io/blog/2015/06/08/cors-support-in-spring-framework
2. http://fanshuyao.iteye.com/blog/2384189
3. https://blog.csdn.net/taiyangnimeide/article/details/78305131
4. https://blog.csdn.net/snowin1994/article/details/53035433
‘玖’ 跨域问题解决方法
跨域？他是浏览器的 同源策略 造成的，是浏览器对javascript施加的安全限制。所谓同源是指：域名、协议、端口均相同。
解决
原理：利用标签具有可跨域的特性，可实现跨域访问接口，需要后端的支持。
服务器在收到请求后，解析参数，计算返还数据，输出messagetow（data）字符串。
缺点：只能发送get请求，无法访问服务器的响应文本（单向请求），即只能获取数据不能改数据。
通过ajax请求不同域的实现，底层不是靠XmlHttpRequest而是script，所以不要被这个方法给迷惑了。
在ajax请求中类型如果是type是get post，其实内部都只会用get，因为其跨域的原理就是用的动态加载script的src，所以我们只能把参数通过url的方式传递
其实jquery内部会转化成
http://192.168.31.137/train/test/jsonpthree?callback=messagetow
然后动态加载http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron"><script type="text/javascript" src=" http://192.168.31.137/train/test/jsonpthree?callback=messagetow "></script>
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">
Cross-Origin Resource Sharing（CORS）跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，确保安全的跨域数据传输。现代浏览器使用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种：
跨域请求默认不会携带Cookie信息，如果需要携带，请配置下述参数：
window.name通过在iframe（一般动态创建i）中加载跨域HTML文件来起作用。然后，HTML文件将传递给请求者的字符串内容赋值给window.name。然后，请求者可以检索window.name值作为响应。
iframe标签的跨域能力；
window.name属性值在文档刷新后依旧存在的能力（且最大允许2M左右）。
每个iframe都有包裹它的window，而这个window是top window的子窗口。 contentWindow 属性返回<iframe>元素的Window对象。你可以使用这个Window对象来访问iframe的文档及其内部DOM。
HTML5新特性，可以用来向其他所有的 window 对象发送消息。需要注意的是我们必须要保证所有的脚本执行完才发送 MessageEvent，如果在函数执行的过程中调用了它，就会让后面的函数超时无法执行。
前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域，所以只能跨子域
在 根域 范围内，允许把domain属性的值设置为它的上一级域。例如，在”aaa.xxx.com”域内，可以把domain设置为 “xxx.com” 但不能设置为 “xxx.org” 或者”com”。
现在存在两个域名aaa.xxx.com和bbb.xxx.com。在aaa下嵌入bbb的页面，由于其document.name不一致，无法在aaa下操作bbb的js。可以在aaa和bbb下通过js将document.name = 'xxx.com';设置一致，来达到互相访问的作用。
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很棒的实现。相关文章，请查看： WebSocket 、 WebSocket-SockJS
**需要注意：**WebSocket对象不支持DOM 2级事件侦听器，必须使用DOM 0级语法分别定义各个事件。
同源策略是针对浏览器端进行的限制，可以通过服务器端来解决该问题,例如nginx
DomainA客户端（浏览器） ==> DomainA服务器 ==> DomainB服务器 ==> DomainA客户端（浏览器）
‘拾’ Web前端中实现跨域的方法有哪些
今天小编要跟大家分享的文章是关于Web前端中实现跨域的方法有哪些?正在从事Web前端工作的小伙伴们来和小编一起看一看本篇文章吧，希望能够对大家有所帮助。
一、同源策略
同源策略是浏览器的一个安全功能，同源即协议、域名、端口三者相同。它限制了从一个源加载的文档或脚本与另一个源进行数据交互，所以#下的JS脚本请求#的数据会被拒绝。
注意：跨域限制访问，其实是浏览器的同源策略限制。
二、跨域
当协议、域名、端口任意一个不同时，都算不同域。不同域之间相互请求资源，就算跨域。
注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。
三、跨域的几种方法
(1)有三个标签允许跨域加载资源
(2)JSONP
JSONP(JSONwithPadding)是json的一种"使用模式"，可以让网页从别的域名获取资料，即跨域读取数据。
JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时在页面调用的数据。数据则为传入回调函数的JSON数据。
JSONP通过
src="#/try/ajax/jsonp.php?jsoncallback=callbackFunction">
(3)CORS
CORS(Cross-OriginResource
Sharing，跨域源资源共享)，基本思想为使用自定义的HTTP头部让浏览器与服务器进行沟通，需要浏览器支持CORS。
客户端：发送HTTP请求时，额外添加一个Origin头部，包含请求页面的源信息，服务器根据此信息决定是否响应。
Origin:http://www.#
服务端：在响应头添加Access-Control-Allow-Origin，回发相同源信息(公共资源可回“*”)，若没有此头部，或头部源信息不匹配，浏览器会驳回请求。
Access-Control-Allow-Origin:http://www.#
(4)WebSockets
Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同源策略对其不适用。
WebSocket在建立连接时要借助HTTP协议，建立连接后会从HTTP交换为WebSocket协议，WebSocket的server
(服务端)与client(客户端)都能主动向对方发送或接收数据。只有支持WebSocket协议的服务器才能正常工作。
(5)postMessage
如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。HTML5为了解决这个问题，引入了一个全新的API：跨文档通信
API(Cross-document
messaging)。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。
postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源(origin)。也可以设为*，表示不限制域名，向所有窗口发送。
以上就是小编今天为大家分享的关于Web前端中实现跨域的方法有哪些的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。
文章来源：原创CodeEditCodeEdit