㈠ 前端跨域如何解决
什么是跨域？
跨域是通俗的说是从一个域名去请求另一个域名的资源。比如从 www..com 页面去请求 www.taobao.com 的资源。
跨域严格一点来说：两个域名只要协议，域名，端口中只要有一个不同，就被成为跨域
浏览器为什么要限制跨域？
只有同域才可以拿到存在cookie中的信息，防止坏人随意拿到我们的信息去做坏事
在团队的配置中，我们为了减少前端对后端的依赖，提高开发效率，使前后端职责更清晰等等因素，我们不得不面对跨域的问题，那我们该怎么解决呢？
1、 JSONP
原理：浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行，所以通过动态插入script标签即可达到跨域的请求
特点：数据为json格式
缺点：不能post
2、 CORS
原理 ： cors(Cross-Origin Resource Sharing)是 W3C CORS 工作草案 ，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否
特点 ：是 JSONP 模式的现代版。支持更多的请求方式，XMLHttpRequest
缺点：需后端配合修改，现代浏览器支持cors，老浏览器依旧要用JSONP
3、 PROXY
原理：proxy代理用于将请求拦截，然后通过服务器来发送请求，然后再将请求的结果传递给前端
node通常用 node-http-proxy 即可
proxy太通用了，weblack-dev-server里已集成，使用时直接配置即可 webpack-dev-server proxy代理
㈡ Nginx解决前端跨域问题 CORS跨域配置
Nginx的CORS配置，网上太多这配置了，但大家更多的复制粘贴、转发，几乎都是类似下面这三两行：
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
这样有用么？有用，我以前这样使用也正常过，但后来还是遇到问题了，发现有些项目请求就不成功，也遇到有些浏览器成功，有些浏览器不成功；
参考Nginx解决前端跨域问题linux部署配置nginx。
㈢ 前端跨域是什么
自从出现前后端分离后，我们调用后端的一些东西，经常会报错。
浏览器请求必须遵循同源策略：同域名、同端口、同协议。
那么跨域是浏览器为了安全而做出的限制策略。
CORS跨域
CORS跨域-服务端设置，前端直接调用。
前端最省事的方法：后台允许前端某个站点进行访问。
JSONP跨域
JSONP是一段JS的脚本，不是一个真正的请求
目前大部分都在使用这种跨越方式。
代理跨域
接口代理-通过修改nginx服务器配置来实现
解释：前端修改，后台不动。
㈣ 如何解决前端跨域问题
可以使用服务器代理或者在后端设置允许跨域。
现在的项目一般是在后端设置允许跨域，前端在带有允许跨域的情况下，可以像没有跨域一样正常访问。
如果前端单独发布到服务器，也可以在服务器是设置代理，使用代理转发请求。
㈤ web前端跨域的一些解决方案
没有归纳之前对跨域的一些说法是模糊的，什么jsonp啊，跨域原理啊，心里只有一个大概的说法，知道这个东西，然后用的时候直接网络Ctrl+C，后来闲下来决定整理一波这些知识点，需知其所以然。
那么，其实这是浏览器对我们的一种保护机制，把坏人挡在门外。那么，问题来了，我们怎么确定门外的人到底是好人还是坏人呢？浏览器关上了坏人的一扇门，留给了我们好人一扇窗。
JSONP跟JSON没有关系..就好像JavaScript和Java一样
浏览器对script、img（这些标签的请求方式都是 GET ，所以jsonp不支持 POST ）这种标签没有限制，我们就可以这样干
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
服务器端对于CORS的支持，主要就是通过设置 Access-Control-Allow-Origin 来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。 更多有关跨域资源共享 CORS 的知识
浏览器中可以查看对应的响应头，举个例子，如下
服务端允许CORS，服务端需要针对接口设置的一系列响应头 (Response Headers)
1.简单请求
目前大多数情况都采用这种方式。简单请求只需要设置 Access-Control-Allow-Origin 即可。满足以下两个条件，就属于简单请求。
2.非简单请求
非简单请求会发出一次预检测请求，返回码是204，预检测通过才会真正发出请求，这才返回200。来看栗子：
非简单请求需要根据不同情况配置不同的响应头，一系列响应头配置项见上方
这个说法相信不陌生，我们依然使用前端域名请求，然后有一个 中介商---代理 把这个请求转发到真正的后端域名上，那也就不存在跨域问题了。
比较普遍的Nginx，简单的配置一下就可以了。了解更多的配置信息： nginx详解
然后前端这边的请求地址是 http://localhost:9099/api/xxx ,然后Nginx监听到地址是 localhost:9099/api 的请求，就帮我们转发到真正的服务端地址 http://.com
CORS与JSONP的使用目的相同，但是比JSONP更强大。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及在服务端同意jsonp方式时，可以向不支持CORS的网站请求数据。Nginx可以说是最方便的，不过需要部署Nginx才行，需要对服务器有一定的理解，不太适合刚入门的同学，当然也可以请后台同学帮忙部署。
window.postMessage(data,origin) 是 HTML5 的一个接口，专注实现不同窗口不同页面的跨域通讯。
现在是这么一个情况,由于同源策略的限制下， a.html 不能操作iframe( b.html )里面的dom，那么使用postMessage就可以解决这一情况
然后 b.html 页面通过message事件监听并接受消息:
这种方式只适合主域名相同，但子域名不同的iframe跨域。
比如主域名是 http://.com/:8888 ，子域名是 http://child..com/:8888 ，这种情况下给两个页面设置相同的document.domain即document.domain = .com 就可以访问各自的window对象了。
前端跨域整理
不要再问我跨域的问题了
㈥ 前端设置请求头可以解决跨域问题吗
不可以。
解决跨越常用的几种方法。
1、jsonp传输。
2、代理。
3、CORS，也就是常用的让服务端设置Access-Control-Allow-Origin:*
或者是Access-Control-Allow-Origin:允许的域名。
㈦ 前端解决跨域都有哪些方法
什么是跨域？
浏览器发送的请求地址（URL）与所在页面的地址 不同（端口/协议/域名 其一不同）。简言之，浏览器发出的请求url，与其所在页面的url不一样。此时，同源策略会让浏览器拒收 服务器响应回来的数据，报错信息如下：
最常用的四种跨域解决方案
1.cors
cors跨域资源共享允许是在服务端"Access-Control-Allow-Origin"字段设置的，当将cors设置为允许某个地址访问时，该地址就可以跨域访问这个服务器地址。当cors设置为"*"时即允许所有地址访问时，则表示所有地址都可以跨域访问这个服务器地址的资源。
2、 通过jsonp跨域
Jsonp是Json的一种“使用模式”，他就可以解决浏览器遇到的跨域问题，我们可以动态创建script，再请求一个带参网址实现跨域通信。用Jsonp请求得到的是JavaScript，相当于直接用JavaScript解析。
3、postMessage跨域
在h5中新增了postMessage方法，postMessage可以实现跨文档消息传输，我们可以通过Windows的message事件来监听发送跨文档消息传输内容。
4、proxy（代理）
原理：因为同源策略只是针对浏览器的安全策略，但是服务端并不受同源策略的限制，也就不存在跨域的问题。
㈧ 后端解决前端跨域请求问题
场景：前后端分离，页面和后端项目部署在不同服务器，出现请求跨域问题。
原因：CORS：跨来源资源共享（CORS）是一份浏览器技术的规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest，这种方式的错误处理比JSONP要来的好，JSONP对于 RESTful 的 API 来说，发送 POST/PUT/DELET 请求将成为问题，不利于接口的统一。但另一方面，JSONP 可以在不支持 CORS 的老旧浏览器上运作。不过现代的浏览器（IE10以上）基本都支持 CORS。
预检请求（option）:在 CORS 中，可以使用 OPTIONS 方法发起一个预检请求(一般都是浏览检测到请求跨域时，会自动发起)，以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法；Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。
解决方案：
1、创建一个过滤器，过滤options请求。
package com.biz.eisp.sci.util;
import org.apache.commons.httpclient.HttpStatus;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* 解决跨域问题
*
*/
public class CorsFilterimplements Filter {//filter 接口的自定义实现
public void init(FilterConfig filterConfig)throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
HttpServletRequest request = (HttpServletRequest) servletRequest;
response.setHeader("Access-Control-Allow-Origin", "*");
if ("OPTIONS".equals(request.getMethod())){//这里通过判断请求的方法，判断此次是否是预检请求，如果是，立即返回一个204状态吗，标示，允许跨域；预检后，正式请求，这个方法参数就是我们设置的post了
response.setStatus(HttpStatus.SC_NO_CONTENT); //HttpStatus.SC_NO_CONTENT = 204
response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS, DELETE");//当判定为预检请求后，设定允许请求的方法
response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with"); //当判定为预检请求后，设定允许请求的头部类型
response.addHeader("Access-Control-Max-Age", "1"); // 预检有效保持时间
}
filterChain.doFilter(request, response);
}
@Override
public void destroy() {
}
}
2、修改web.xml文件
<filter>
<filter-name>cors</filter-name>
<filter-class>com.biz.eisp.sci.util.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<url-pattern>/* </url-pattern>
</filter-mapping>
3、spring-mvc.xml添加HttpRequestHandlerAdapter http请求处理器适配器。
HttpRequestHandlerAdapter作为HTTP请求处理器适配器仅仅支持对HTTP请求处理器的适配。它简单的将HTTP请求对象和响应对象传递给HTTP请求处理器的实现，它并不需要返回值。它主要应用在基于HTTP的远程调用的实现上。
<bean class="org.springframework.web.servlet.mvc.HttpRequestHandlerAdapter"/>
㈨ 前端跨域解决方案有哪些
处理跨域方法一——JSONP
1.JSONP原理
利用script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。
2.JSONP和AJAX对比
JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）
3.JSONP优缺点
JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性。
4.JSONP的流程(以第三方API地址为例，不必考虑后台程序)
声明一个回调函数，其函数名(如fn)当作参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的data)。
创建一个
服务器接收到请求后，需要进行特殊的处理：把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如：传递进去的函数名是fn，它准备好的数据是fn([{“name”:“jianshu”}]）。
最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数（fn），对返回的数据进行操作。
处理跨域方法二——CORS
1.CORS原理
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
2.CORS优缺点
CORS要求浏览器(>IE10)和服务器的同时支持，是跨域的根本解决方法，由浏览器自动完成。
优点在于功能更加强大支持各种HTTP Method，缺点是兼容性不如JSONP。
处理跨域方法三——WebSocket
Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。
原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。
处理跨域方法四——postMessage
如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。