JS中跨域产生的原因及解决方案
一、跨域产生的原因
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。
二、什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
当前页面url被请求,页面url是否跨域原因
三、跨域的解决方案
1.通过JSONP
上面那种方式的通信是双向的,页面与iframe或是页面与页面之间的
JSONP主要是封装好的请求方式添加callback,这个callback是由前后端约定好的
它的优劣势:
JSONP的优点:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题;无法判断它是否请求成功,只能通过timeout
2.CORS跨域
实现CORS通信的关键是服务器端,只要服务端那边实现了CORS接口,就可以跨源通信
CORS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,便可以允许Ajax进行跨域的访问
CORS和JSONP对比
JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS)。
CORS与JSONP相比,显然更为先进、方便和可靠。
3.设置代理
目前市场上用vue技术不在少数,下面介绍一种配置代理方式
在vue.config.js该文件里面配置如下:
devServer: {
port: 8001,
open: true,
disableHostCheck: true,
proxy: {
‘/api’: {
target: ‘https:/xxx.com’,
secure: true, // false为http访问,true为https访问
ws: true,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
}
}
后面请求是需要带上‘/api’请求即可
————————————————