‘壹’ 前端跨域解决方案有哪些
处理跨域方法一——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），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。
‘贰’ 开发中为什么会出现跨域问题（不是问什么是跨域
出现跨域问题的原因:
1 web中浏览器设置的相关策略
2 应用程序本身设置的禁止跨域限制
跨域问题出现的阶段:
常出现在web开发中,前端访问不同于前端域的服务器端域
产品上线后，也可能存在跨域问题， 因为当一个产品中的不同模块部署到不同的www地址中
‘叁’ 前端解决跨域都有哪些手段
1. jsonp解决跨域，缺点:只局限于GET请求；应用场景：请求第三方平台数据（比如天气数据）时使用较多
2. 服务器端设置Access-Control-Allow-Origin响应头，允许前端跨域。这种办法比较便捷，前端不需要调整代码，一般企业中用的比较多
3. 搭建一个本地的中间服务器，作为代理，帮助获取需要跨域的服务器的数据
4. vue项目可以进行proxy反向代理的配置，实现跨域
黑马程序员官网有成套免费视频哦，有什么不懂的可以直接过去学习。
‘肆’ 前端和后台会有跨域问题，一般有哪些方法
‘伍’ 如何解决前端跨域问题
可以使用服务器代理或者在后端设置允许跨域。
现在的项目一般是在后端设置允许跨域，前端在带有允许跨域的情况下，可以像没有跨域一样正常访问。
如果前端单独发布到服务器，也可以在服务器是设置代理，使用代理转发请求。
‘陆’ 前端设置请求头可以解决跨域问题吗
不可以。
解决跨越常用的几种方法。
1、jsonp传输。
2、代理。
3、CORS，也就是常用的让服务端设置Access-Control-Allow-Origin:*
或者是Access-Control-Allow-Origin:允许的域名。
‘柒’ 前端web开发html如何避免js的跨域访问
前端web开发html避免js的跨域访问的方法是后台服务端做域配置兼容处理。
1、在server端请求过滤的时候加入以下控制：
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
Access-Control-Allow-Origin这个属性配置成*就表示接受任何域过来的请求
2.ajax中请求如下：
$.ajax({
xhrFields: {
withCredentials: true
},
data:{ my: 'a' },
url: 'http://MyApp/Page', 这里是跨域访问
type: 'POST'
})
‘捌’ 前端解决跨域都有哪些方法
什么是跨域？
浏览器发送的请求地址（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（代理）
原理：因为同源策略只是针对浏览器的安全策略，但是服务端并不受同源策略的限制，也就不存在跨域的问题。
‘玖’ 前端请求接口出现跨域问题怎么解决
使用jsonp
响应头增加CORS跨域响应的信息
服务器（同域内的）做一次转发
‘拾’ 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。