美文网首页
前端的跨域问题理解

前端的跨域问题理解

作者: 叫我魏大川 | 来源:发表于2020-05-06 17:16 被阅读0次

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

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

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

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

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

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

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

相关文章

  • Django 后端解决跨域问题

    前端后端分离的项目,经常会遇到跨域请求的问题。解决跨域问题,有从前端的代理解决的方案,和用后端的解决方案。这里介绍...

  • 前端的跨域问题理解

    前端真的的是乱的一笔。--来自iOS开发者的一声哀鸣 需要把前端看成两部分,一部分是页面,另一部分是接口(或者加数...

  • 前端踩过的坑

    关于前端 跨域问题 大概问题 1,前端无须处理,需要在后台配置 niginx的配置 处理跨域的域名 关于布局上 ...

  • 跨域问题整理

    跨域,是一个前端开发者必须掌握的概念,这篇文章就从几个基本问题出发,来理解这个概念。 首先,什么是跨域?为何会有跨...

  • Day 100/100 Vue3.0 & Vue-cli4.5

    写在前端的话 除了后端解决跨域问题前端可以解决吗?答案是可以~~~ (一)问题 遇到了跨域问题,本地的URL是 h...

  • 跨域访问

    参考文献:jsonp解决跨域问题 . cors解决跨域问题 . (java+前端小白)第一次碰到跨域问题,小伙伴们...

  • django跨域配置

    前言——跨域请求 前端对Cross-Origin Resource Sharing 问题(CORS,中文又称'跨域...

  • webpack4基本使用(四)-跨域-环境变量

    16 wepack跨域问题 通过前端代理实现跨域 如果前端只是模拟数据时,我们可以使用devServer 自带的e...

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • [mark]九种跨域方式实现原理

    前端如何使用proxyTable和nginx解决跨域问题 前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及...

网友评论

      本文标题:前端的跨域问题理解

      本文链接:https://www.haomeiwen.com/subject/ozuwghtx.html