企业网站建设费用 珠海,微信公众号功能介绍,那个网站可以做双色球号码对比的,工程公司简介跨域问题什么是跨域问题如何解决跨域问题JSONPCORS方式解决跨域使用 Nginx 反向代理使用 WebSocket跨源请求是否能携带Cookie什么是跨域问题 跨域问题指的是不同站点之间#xff0c;使用 ajax 无法相互调用的问题。跨域问题本质是浏览器的一种保护机制#xff0c;它的初衷是为…
跨域问题什么是跨域问题如何解决跨域问题JSONPCORS方式解决跨域使用 Nginx 反向代理使用 WebSocket跨源请求是否能携带Cookie什么是跨域问题 跨域问题指的是不同站点之间使用 ajax 无法相互调用的问题。跨域问题本质是浏览器的一种保护机制它的初衷是为了保证用户的安全防止恶意网站窃取数据.同源策略是拥有相同的协议、域名、端口号的网址间才可以相互访问资源。缺少同源策略浏览器容易收到XSS、CSRF等攻击。跨域并不是客户端请求发不出去而是客户端请求发出去了服务器也正常返回结果了但是结果被浏览器拦截了。 跨域的三种情况: 协议不同如 http 和 https.域名不同.端口不同. 如何解决跨域问题
JSONP JSONPJSON with Padding通过没有同源策略限制的script标签发起一个请求将回调函数的名称放到这个请求的query参数里然后服务端返回这个回调函数的执行并将需要响应的数据放到回调函数的参数里前端的script标签请求到这个执行的回调函数后会立马执行于是就拿到了执行的响应数据。 前端代码
% page languagejava contentTypetext/html; charsetUTF-8 pageEncodingUTF-8%
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
head
/head
bodyh2验证使用JSONP方式发送跨域请求/h2divinput typebutton value发送请求 onclickajaxJsonp()/div
/body
script typetext/javascript// 前端通过动态创建javascript标签的方式发送请求function ajaxJsonp() {//将回调函数的名称放到这个请求的query参数里var url http://localhost:8081/jsonp?callbackjsonpcall; var script document.createElement(script);script.setAttribute(type,text/javascript);script.src url;document.body.appendChild(script);}// jsonp返回数据时调用的函数,数据以参数形式传递function jsonpcall(data) {console.log(do response jsonp data);console.log(data);}
/script
/html后端代码
/*** 使用JSONP方式处理跨域GET请求* param req* param resp* param callback 回调函数名称* return*/
RequestMapping(value /jsonp, method RequestMethod.GET)
ResponseBody
public Object testAjaxJsonp(HttpServletRequest req, HttpServletResponse resp,RequestParam(callback) String callback) {JSONObject json new JSONObject();json.put(name, jsonp);json.put(id, );// 将数据作为函数的参数返回给浏览器,如: jsonpcall({name:jsonp,id:})return new StringBuffer().append(callback).append(().append(json).append());
}优缺点 jsonp的优点就是兼容性好可以解决主流浏览器的跨域问题缺点是仅支持GET请求不安全可能遭受xss攻击 CORS方式解决跨域 cors是跨域资源共享是一种基于 HTTP 头的机制该机制通过允许服务器标示除了它自己以外的其它 origin域协议和端口使得浏览器允许这些 origin 访问加载自己的资源。前端浏览器在IE9以上后端在响应报头添加Access-Control-Allow-Origin标签从而允许指定域的站点访问当前域上的资源。不过CORS默认只支持GET/POST这两种http请求类型如果要开启PUT/DELETE之类的方式需要在服务端在添加一个Access-Control-Allow-Methods报头标签 resp.setHeader(Access-Control-Allow-Origin, req.getHeader(origin));
resp.setHeader(Access-Control-Allow-Methods, POST, GET, OPTIONS, DELETE, PUT);优缺点 CORS支持所有类型的HTTP请求功能完善。这点JSONP被玩虐但大部分情况下GET已经能满足需求了但IE10以下不支持CORS 使用 Nginx 反向代理 由于同源策略仅存在于浏览器之间服务器之间的交互不需要遵循同源策略。所以我们这里可以使用 Nginx 作为 Web 服务器监听并接收来自外部其他服务器请求将接收到的请求使用和本机相同的域名转发到后端然后再将响应转发给前端 使用 WebSocket HTML5 定义了 Websocket 协议该协议主要用于服务器和浏览器之间的持久化连接并且没有同源策略的限制。该方法需要后端提供 Websocket 接口前端进行接收但如果仅仅是为了实现跨域不推荐使用 Websocket。 跨源请求是否能携带Cookie 默认情况下是跨域是不会携带cookie的例如a.com 网站请求 b.com 的接口这个时候不会把a.com这个域名下的 cookie 携带上。如果需要携带则需要做一下配置 前端配置 XMLHttpRequest发请求需要设置 withCredentialstruefetch 发请求需要设置 credentials include 服务器端配置 Access-Control-Allow-Credentials: true
