跨域几种解决方案(一)

简介: 跨域几种解决方案(一)

一、JSONP:

利用script标签可跨域的特点,在跨域脚本中可以直接回调当前脚本的函数


1)jsonp出现背景简介:

1、出现跨域的原因:浏览器同源策略导致


2、浏览器同源场景:同一协议、同一域名、同一个端口


3、类比正常使用场景:script、img、a 的src hrep 标签属性a、举一例分析:img src 获取一张图片 get请求 获取文件流展示到页面上


4、josnp利用该原理而产生:
a、仅get请求 传参里面包含js函数名称
b、接口返回内容里面包含一个js 函数名称c、页面上解析返回内容并调用该js函数


5、代码:

image.png

image.png

二、CORS:服务器设置HTTP响应头中Access-Control-Allow-Origin值,解除跨域限制1、代码

image.png


三、通过中间接口转发 避免前端页面出现跨域问题

image.png

四、搭建API网关 image.png

五、正向代理和反向代理比较


  • 从用途上来讲:
  • 正向代理的典型用途是为在防火墙内的局域网客户端提供访问Internet的途径。正向代理还可以使用缓冲特性减少网络使用率。
  • 反向代理的典型用途是为后端的多台服务器提供负载平衡,或为后端较慢的服务器提供缓冲服务。


  • 从安全性来讲:
  • 正向代理允许客户端通过它访问任意网站并且隐藏客户端自身,因此你必须采取安全措施以确保仅为经过授权的客户端提供服务。
  • 反向代理对外都是透明的,访问者并不知道自己访问的是一个代理。


  • 从使用方来看:
  • 正向代理是浏览器端进行配置的,与服务器端无关,甚至可以对服务端隐藏。
  • 反向代理是服务器端配置的,对浏览器端是透明的。


相关文章
|
6月前
|
前端开发 开发者
前端开发中的跨域资源共享(CORS)解决方案探讨
【2月更文挑战第2天】跨域资源共享(CORS)是前端开发中常见的问题,本文将深入探讨CORS的原理及解决方案,包括简单请求、预检请求以及常用的CORS解决方案,为前端开发者提供深入的理解和应对CORS问题的有效方法。
108 1
|
6月前
|
前端开发 JavaScript 安全
跨域的五种最常见解决方案
跨域的五种最常见解决方案
111 0
|
Web App开发 JSON 前端开发
前端跨域解决方案-汇总
前端跨域解决方案-汇总
156 0
|
1月前
|
JavaScript 前端开发 安全
跨域解决方案有哪些?
本文介绍了多种跨域解决方案,包括JSONP、CORS、postMessage、WebSocket、document.domain+iframe、window.name、location.hash、Node.js代理、Nginx代理和CORS Anywhere。每种方法都有其适用场景和优缺点,如JSONP简单但只支持GET请求,CORS安全但兼容性稍差,WebSocket适用于实时通信但需服务器支持。开发者可根据具体需求选择合适的跨域方案。
41 3
跨域解决方案有哪些?
|
6月前
|
运维 前端开发 JavaScript
关于跨域,和跨域问题的完整解决方案
关于跨域,和跨域问题的完整解决方案
56 0
|
移动开发 前端开发 JavaScript
前端跨域的解决方案?
前端跨域的解决方案?
108 0
|
6月前
|
前端开发 JavaScript
CORS跨域资源共享及解决方案
CORS跨域资源共享及解决方案
65 0
|
6月前
|
JSON JavaScript 前端开发
跨域的原理及解决方案
同源策略是Web应用程序安全性模型中的重要概念。根据该策略,Web浏览器允许第一个网页中包含的脚本访问第二个网页中的数据,但前提是两个网页具有相同的来源。来源由URI,主机名和端口号的组合定义。此策略可防止一个页面上的恶意脚本通过该页面的DOM(Document Object Model)获得对另一网页上敏感数据的访问。 JSONP 由于同源策略,一般来说位于server1.example.com...
|
移动开发 JavaScript 前端开发
前端常见跨域解决方案(全)
前端常见跨域解决方案(全)
862 0
|
移动开发 前端开发 安全
【前端跨域的解决方案?】
【前端跨域的解决方案?】