前端跨域解决方案-汇总

简介: 前端跨域解决方案-汇总

1. 前言

  1. 跨域作为前端常见的问题,还是单独写篇文章 给足面子吧
  2. 列出常见的 跨域解决方案

2. CORS(跨域资源共享)

  1. CORS 是一种由浏览器实现的机制,允许服务器在响应头中设置允许跨域访问的规则,从而解决跨域请求的问题。
  2. 服务器端需要设置响应头中的 Access-Control-Allow-Origin 字段来指定允许跨域请求的域名
  3. 至于 nodejs的 跨域插件 cos, python的flask_cors 都是第三方帮助我们设置而已

3. JSONP(JSON with Padding)

  1. JSONP 是一种通过动态添加 <script> 标签来实现跨域请求的方法。
  2. 通过在请求 URL 中传递一个回调函数的名称,服务器将返回一个包裹在回调函数中的 JSON 数据,从而实现跨域数据获取。
  3. 这并不是规范,现在用的也少了

4. 代理服务器:

  1. 可以通过设置代理服务器,将前端请求转发到同源的后端服务器上。
  2. 前端通过向代理服务器发送请求,
  3. 然后由代理服务器将请求转发到目标服务器上,并将响应返回给前端,从而避免了跨域问题
  4. WebSocket:
  5. WebSocket是一种双向通信协议,可以建立客户端与服务器之间的长连接
  6. 通过WebSocket进行数据传输不受同源策略限制,从而实现跨域通信。

5. postMessage:

  1. 通过使用 postMessage API,页面间可以相互发送消息,包括跨域的页面。
  2. 这种方式适用于不同窗口之间的通信,例如 iframe 和父窗口之间的通信。

6. Nginx 反向代理:

  1. 在服务器端使用Nginx 等反向代理服务器,将前端的请求转发到后端服务器上,实现跨域访问

7.CORS Anywhere:

  1. CORS Anywhere是一个中间代理服务器,可以将跨域请求转发到目标服务器,并在响应中添加 CORS 头,从而实现跨域访问。
  2. 需要注意使用该方法时需要保证代理服务器的可信性和安全性

8. 浏览器插件

  1. chrome,edg,Firefox 浏览器都可以安装跨域插件
  2. 不过只在开发阶段自己玩玩就行了


参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
2月前
|
前端开发
前端跳转链接报错403的原因以及解决方案
前端跳转链接报错403的原因以及解决方案
144 1
|
2月前
|
JSON 前端开发 安全
前端开发中的跨域问题及解决方案
在前端开发中,跨域是一个常见但又令人头疼的问题。本文将深入探讨跨域产生的原因以及一些常见的解决方案,帮助开发者更好地理解和处理跨域情况。
|
19天前
|
Web App开发 移动开发 运维
跨域解决方案[前端+后端]
跨域解决方案[前端+后端]
25 0
|
29天前
|
前端开发
无法解锁/var/lib/dpkg/lock-frontend和无法获取 dpkg 前端锁 (/var/lib/dpkg/lock-frontend)【解决方案】
无法解锁/var/lib/dpkg/lock-frontend和无法获取 dpkg 前端锁 (/var/lib/dpkg/lock-frontend)【解决方案】
|
2月前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈应用的技术挑战与解决方案
在当今互联网时代,全栈开发成为越来越受欢迎的技术趋势。本文将深入探讨从前端到后端的全栈开发过程中所面临的技术挑战,并提出相应的解决方案,涵盖前端框架选择、后端技术架构、数据库设计以及跨平台兼容性等关键问题。
|
2月前
|
前端开发
前端性能优化:掌握解决方案
我们常说性能永远是第一需求,作为一个前端工程师,不管使用什么框架,不管从事什么类型的网站或应用开发,只要是项目被用户使用,性能优化就永远是你需要关注的问题。通常情况下,工程师们在深入了解前端技术的原理后,才能总结出性能优化的方案,需要多年经验的积累。前端技术日新月异,优秀的性能优化方案在近几年也层出不穷。本课程带你使用当今行业中非常前沿&专业的方案,解决前端性能优化问题。无论是为了解决工作中的实际问题,还是为了提升能力,这门课都能帮到你。
15 2
前端性能优化:掌握解决方案
|
2月前
|
前端开发 安全 开发者
前端开发中的跨域资源共享(CORS)问题及解决方案探讨
在前端开发中,跨域资源共享(CORS)是一个常见且重要的问题。本文将深入探讨CORS的原理、影响以及解决方案,帮助开发者更好地应对跨域请求问题。
|
2月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
74 0
|
2月前
|
前端开发
前端播放第三方外链视频报403 forbidden的原因及解决方案
前端播放第三方外链视频报403 forbidden的原因及解决方案
67 0
|
2月前
|
JSON 前端开发 安全
前端解决跨域的六种方法
跨域问题是指当一个网页试图访问来自不同源(域名、协议、端口)的资源时,浏览器会出于安全考虑而限制这种访问。这是因为浏览器的同源策略防止了恶意网站获取其他网站的敏感信息。