当前位置:首页 » 网页前端 » 前端什么是跨域
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端什么是跨域

发布时间: 2023-01-12 08:57:13

前端跨域如何解决

什么是跨域?
跨域是通俗的说是从一个域名去请求另一个域名的资源。比如从 www..com 页面去请求 www.taobao.com 的资源。
跨域严格一点来说:两个域名只要协议,域名,端口中只要有一个不同,就被成为跨域

浏览器为什么要限制跨域?
只有同域才可以拿到存在cookie中的信息,防止坏人随意拿到我们的信息去做坏事

在团队的配置中,我们为了减少前端对后端的依赖,提高开发效率,使前后端职责更清晰等等因素,我们不得不面对跨域的问题,那我们该怎么解决呢?

1、 JSONP
原理:浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行,所以通过动态插入script标签即可达到跨域的请求
特点:数据为json格式
缺点:不能post

2、 CORS
原理 : cors(Cross-Origin Resource Sharing)是 W3C CORS 工作草案 ,它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否
特点 :是 JSONP 模式的现代版。支持更多的请求方式,XMLHttpRequest
缺点:需后端配合修改,现代浏览器支持cors,老浏览器依旧要用JSONP

3、 PROXY
原理:proxy代理用于将请求拦截,然后通过服务器来发送请求,然后再将请求的结果传递给前端

node通常用 node-http-proxy 即可

proxy太通用了,weblack-dev-server里已集成,使用时直接配置即可 webpack-dev-server proxy代理

❷ 前端的跨域问题理解

前端真的的是乱的一笔。--来自iOS开发者的一声哀鸣

需要把前端看成两部分,一部分是页面,另一部分是接口(或者加数据资源)。前端页面中调接口是有限制的,同源策略(SOP)要求我们调用的接口必须和页面在同一域名下,说是为了保证数据的安全。所谓同源:协议+域名+端口

但实际情况是,在前后端分离的大趋势下,好多页面和接口的服务器分布在不同的域名下。比如在开发时,前端页面分为本地环境、测试环境、仿真环境、正式环境,而接口也分为测试环境、仿真环境、正式环境,当然也可以有本地环境。他们在不同的域名下或IP下或者端口下,是不同源的。或者平时我们也能遇到需要调用不同的服务器数据资源。显然,同源策略保障了部分安全的同时,给开发造成了很多的麻烦。

所以,跨域问题是每个前端绕不过去的坎儿。

解决办法有两个方向,一个是前端解决,一个是服务端接口解除限制。

前端解决就是通过jsonp、jquery ajax、axios配置代理等。还有个简单的,比如Mac用户,可以使用Charles工具设置代理,临时使用。
服务端解决可以通过nginx反向代理设置允许跨域请求的域名、或者设置Access-Control-Allow-Origin,允许跨域资源共享等。
具体解决方案可参考 https://segmentfault.com/a/1190000011145364

反观iOS,轮廓简直不要太清晰,大部分时候只用专注于开发,没有各种乱七八糟的事情。

❸ 如何解决前端跨域问题

可以使用服务器代理或者在后端设置允许跨域。
现在的项目一般是在后端设置允许跨域,前端在带有允许跨域的情况下,可以像没有跨域一样正常访问。
如果前端单独发布到服务器,也可以在服务器是设置代理,使用代理转发请求。

❹ 跨域是指什么,因为什么引起的有哪些解决方案web前端知识

广义跨域就是指跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。

当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理。这就形成了“跨域”。