当前位置:网站首页 > Vue.js开发 > 正文

跨域解决方案js(跨域解决方案java)



大家好,又见面了,我是你们的朋友全栈君。

什么是跨域问题

出于安全考虑,对于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文件中引入过滤器即可.

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跨域问题的集中解决方案,大家可以根据自己在项目中的需要灵活的来选择适合自己的解决方案,希望可以帮到大家.

无论你在学习上有任何问题,重庆蜗牛学院欢迎你前来咨询,联系:

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/172584.html原文链接:https://javaforall.cn

到此这篇跨域解决方案js(跨域解决方案java)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • plsql注册码过期(plsql8.0注册码)2025-10-13 09:27:10
  • ubuntu 源设置(ubuntu 18.04更换源)2025-10-13 09:27:10
  • vue 安装(vue 安装vue route)2025-10-13 09:27:10
  • vuejs反编译(vue.js反编译)2025-10-13 09:27:10
  • vue路由守卫面试题(vue3 路由守卫)2025-10-13 09:27:10
  • spss27授权码分享(spss22.0授权码)2025-10-13 09:27:10
  • vue2和vue3哪个好(vue2和vue3的区别)2025-10-13 09:27:10
  • js数组方法some(js数组方法some的用法)2025-10-13 09:27:10
  • pcie5.0显卡什么时候出(pcie5.0对显卡有提升吗)2025-10-13 09:27:10
  • 跨域是什么,如何解决跨域vue(跨域解决方案vue)2025-10-13 09:27:10
  • 全屏图片