美文网首页
前端开发之路--常见的跨域问题解决方案一

前端开发之路--常见的跨域问题解决方案一

作者: 唐人不自醉 | 来源:发表于2018-11-19 00:44 被阅读9次

WEB前端开发中,在与后端交互或者调用其它服务接口的时候,应该都会遇过跨域请求数据的问题(最直接的表现就是请求数据失败),小编在这里总结了一些常见的跨域解决方案。


同源策略

在了解跨域(狭义)前,其实要先了解一下浏览器的同源策略,所谓的同源是指协议,域名,端口完全相同。
图中箭头所指依次是:协议,域名,端口。


2345截图20181119003909.png

浏览器的同源策略是出于基础安全的角度考虑的,如果不同源的话,网络上的资源和服务接口便会得以被随意访问和调用,会有很大的安全隐患,这也是同源策略的存在的理由。而只要协议,域名,端口任何一个不一致,便造成了跨域。


2345截图20181119003909.png

但是有时候出于某些原因,我们需要跨域去访问部分资源,所以要处理一下跨域问题,处理的方式大概分为两种:前端处理和后端处理。


2345截图20181119003909.png

在这里在科普一下:同源策略是在浏览器上实现的,其实服务端返回的数据是被浏览器所拦截的。


2345截图20181119003909.png

script标签解决方案

script标签是解决前端跨域的解决方案之一。
script标签通常是用来js文件,以及作为js脚本的书写域。
几乎所有浏览器都支持这个标签。


2345截图20181119003909.png

这里是要借助script的src属性去完成跨域,如上图所示,script标签引入的文件是来自其它源的资源,但并没有触发浏览器的同源策略,从不同域名下加载静态资源,而被浏览器允许,变相的解决了跨域问题。这种解决方案便是jsonp。

2345截图20181119003909.png

相关文章

  • 跨域

    博客 说说跨域那些事儿 不要再问我跨域的问题了 前端常见跨域解决方案(全) 同源策略 JSONP(填充式JSON)...

  • 常见跨域解决方案以及Ocelot 跨域配置

    常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的时候,如果前端项目和a...

  • vue解决跨域问题

    跨域问题在开发中,是一个常见的问题。解决方案可以在前端处理也可以在后端解决,本教程为在前端处理。 本教程讲解的为v...

  • 关于跨域与服务器代理的问题(vue、jquery-ajax、ax

    作为一名前端开发工程师,我们在开发中经常会遇到跨域这个问题。今天想从跨域的原理说起,接着到解决方案,最后到框架对跨...

  • 前端常见跨域解决方案(全)

    前端常见跨域解决方案(全) 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的...

  • 跨域解决方案(史上最易懂)

    跨域总结 1.跨域思路 跨域解决方案一般分为两种:前端解决,后端解决 1.1 前端解决方案 通过前端解决的思想就是...

  • js常见跨域解决方案

    参考:前端常见跨域解决方案(全) 跨域,什么是“域”? 这里就要先说说同源策略了。所谓同源是指"协议+域名+端口"...

  • JS之跨域问题汇总

    1JS 之跨域问题汇总 跨域问题的场景和解决方案多种多样,只要是做前端开发,总会遇到。而且面试时也是必问的问题。所...

  • IOS webview iframe 引入第三方页面白屏

    跨域引入或者跨域请求是前端小伙伴在开发中经常遇到的问题,,在网上搜索你会发现很多解决方案:无论是前端Vue项目的加...

  • 跨域问题分析

    因为浏览器的同源策略,前端开发会遇到各种跨域问题。本篇文章总结了遇到跨域问题的不同的场景以及对应的解决方案。 协议...

网友评论

      本文标题:前端开发之路--常见的跨域问题解决方案一

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