解决跨域问题

简介: 解决跨域问题
什么是跨域


跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。


解决方法



  1. jsonp

原生的js中的script,link,img,iframe等资源访问访问标签自带跨域功能,也就是使用这些标签请求不同源的资源时,浏览器会默认的放行


jsonp就是利用script标签跨域功能,将跨域资源路径卸载script的src中进行跨域请求


scriptDom.src="http://localhost:5000/bar.data=a"请求路径后面定义了一个回调函数,随请求一并的传递给服务器,服务器就会获取到这个参数,然后返回一个调用字符串浏览器拿到字符串之后,会将字符串当作js代码进行执行,这就完成了跨域。


jsonp需要客户端和服务端的写作完成,客户端要定义全局的回调函数,并在请求参数中添加对应的回调函数。


服务器则需要获取到回调的函数,然后将服务数据放在回调函数中,作为字符串进行返回。


注意:浏览器有自动把服务器返回的字符串进行解析执行的能力


2.CORS方式解决跨域:


cors是跨域资源共享,是一种基于 HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的其它 origin(域,协议和端口),使得浏览器允许这些 origin 访问加载自己的资源。服务端设置了Access-Control-Allow-Origin就开启了CORS,所以这种方式只要后端实现了CORS,就解决跨域问题,前端不需要配置。


CORS方式解决跨域问题比较常用,只需要后端配置响应头Access-Control-Allow-Origin


3.搭建Node代理服务器解决跨域:


因为同源策略是浏览器限制的,所以服务端请求服务器是不受浏览器同源策略的限制的,因此我们可以搭建一个自己的node服务器来代理访问服务器。


大概的流程就是:我们在客户端请求自己的node代理服务器,然后在node代理服务器中转发客户端的请求访问服务器,服务器处理请求后给代理服务器响应数据,然后在代理服务器中把服务器响应的数据再返回给客户端。客户端和自己搭建的代理服务器之间也存在跨域问题,所以需要在代理服务器中设置CORS。


nginx反向代理接口跨域


跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。


实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。


5.Nodejs中间件代理跨域


node中间件实现跨域代理,原理大致与nginx相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名,实现当前域的cookie写入,方便接口登录认证。

目录
相关文章
|
3月前
|
存储 JSON JavaScript
跨域问题
跨域问题
58 1
|
22天前
|
JSON 前端开发 安全
CORS 是什么?它是如何解决跨域问题的?
【10月更文挑战第20天】CORS 是一种通过服务器端配置和浏览器端协商来解决跨域问题的机制。它为跨域资源共享提供了一种规范和有效的方法,使得前端开发人员能够更加方便地进行跨域数据交互。
|
11月前
|
JSON 前端开发 JavaScript
解决跨域问题
解决跨域问题
|
6月前
|
运维 前端开发 JavaScript
关于跨域,和跨域问题的完整解决方案
关于跨域,和跨域问题的完整解决方案
56 0
|
6月前
|
JSON 前端开发 JavaScript
前端跨域问题
前端跨域问题
72 0
|
JavaScript 前端开发 中间件
前端解决跨域问题(9个方法)
前端解决跨域问题(9个方法)
1704 0
|
Web App开发 JSON 前端开发
跨域问题总结
跨域问题总结
1031 0
跨域问题总结
|
存储 前端开发 JavaScript
|
JSON Android开发 数据格式
|
前端开发 Java 应用服务中间件
解决项目中的跨域问题
解决项目中的跨域问题
171 0