大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
什么是跨域问题
出于安全考虑,对于Ajax请求,浏览器会发起同源检查。所谓的同源是指发出请求的网页与请求的服务器对应的通讯协议、域名、端口完全一致。如果发起请求的网页和Ajax请求的目标地址不同源就会出现所谓的跨域问题而无法正确访问。
跨域问题的解决方案
Cross(跨域资源共享方案)
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing).它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。具体的过程如下:
(1)当我们发送AJAX请求时,浏览器会自动添加一个请求头Origin(源),该请求头中存储了发出该请求地址的源.
(2)浏览器发送该请求,收到服务器响应
(3)浏览器判断服务器响应头中的Access-Control-Allow-Origin(控制允许访问的源),如果该响应头中的源和发送请求时源相同,则本次请求进入Ajax的正确回调.如果不存在在响应头或者响应头中的允许访问源和发送请求时的源不同则报错.
所以使用Cross解决跨域问题的核心就是在响应时添加一个Access-Control-Allow-Origin响应头.
我们可以选择在Servlet中自己设置一个响应头:
该响应头可以告诉浏览器服务器允许从任何域发送过来的请求.
设置该响应头以后,跨域问题就得到解决了.
也可以引入第三方的jar包,在该jar包中定义了一个过滤器,使用该过滤器对响应头做出统一处理。
先导入jar包
导入jar包以后在web.xml文件中引入过滤器即可.
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept,Origin,X-Requested-With,Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
JSONP
JSONP解决跨域问题的思路是通过script标签访问Servlet地址,然后在Servlet中响应一个js脚本,该js脚本会调用前端定义好的一个回调函数,并传入我们的响应数据。
代码如下:
前端:
注册点击事件
函数中向当前网页追加一个script标签,src地址为服务器Servlet地址
定义回调函数,用于处理数据
后端:
后端响应一个callback(数据),通过该js脚本调用前端的回调函数
当然Jquery也对Jsonp进行了封装只需要设置dataType为jsonp即可,注意jsonp只支持get提交方式.
其原理如下:
Jquery发送jsonp请求时,每次都会传一个callback参数到服务器,该参数代表了jquery定义的回调函数名称,我们需要在服务器Servlet中取出callback的参数名称响应脚本。
本地请求代理
还有一种方案,是通过请求本地的地址,在服务端使用httpclient请求跨域服务器,得到数据之后再响应给前端.如下图:
Nginx反向代理服务器
在部署应用时使用反向代理服务器例如Nginx,所有的请求包括静态资源和数据接口都是通过Nginx的地址来进行访问,那么也不存在跨域问题了.
好的这就是Ajax跨域问题的集中解决方案,大家可以根据自己在项目中的需要灵活的来选择适合自己的解决方案,希望可以帮到大家.
无论你在学习上有任何问题,重庆蜗牛学院欢迎你前来咨询,联系QQ:296799112
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/172584.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...