当前位置:首页 > 技术分析 > 正文内容

最常见五种跨域解决方案

ruisui882个月前 (03-07)技术分析6

严格来讲,跨域其实并不是一种问题,而是一种网络调用的安全策略。在浏览器中有一种策略方式叫做同源策略,这也就规定了有一部分请求是不能被浏览器所接受的,也就是说同源策略的跨域是因为浏览器不接受而造成的,并不是说服务端对请求没有做出响应。

什么是同源策略?

一般来讲我们使用的URL被分为的三个部分:协议、域名、端口。只有当三者都一致的时候,才被称为是同源。在同源策略中规定,之后发送请求的一边和接受请求的一边处于同源的情况下,浏览器才会接收到响应。如下几种

发送请求地址:http:192.168.1.200:8080/index    
接受请求地址:http:192.168.1.200:8081/index //不同源 端口不同

发送请求地址:http:192.168.1.201:8080/index     
接受请求地址:http:192.168.1.200:8080/index //不同源 ip不同

发送请求地址:http:192.168.1.200:8080/index     
接受请求地址:https:192.168.1.200:8080/index //不同源 协议不同

发送请求地址:http:192.168.1.200:8080/index     
接受请求地址:http:192.168.1.200:8080/login //同源 协议,端口,ip都相同,路径不同无所谓

那么如何去解决跨域问题呢?下面我们就来详细介绍一下常见的几种跨域解决方案。

JQuery 的Ajax 请求

在JQuery中自带了Ajax的跨域请求解决方案,其底层原理是使用JSONP来解决。如下所示。

$.ajax({
    url: 'http://192.168.1.200:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp  设置跨域的重点
    jsonpCallback: "callBack",  // 回调函数
});

在JQuery项目中这是一种比较常见的解决方案。

使用script标签解决跨域问题

在一些老旧项目中,没有使用到JQuery,为了解决跨域问题,采用了script标签来实现跨域解决方案。如下。

<script>
      // 回调
      function callBack(res) {
          console.log("跨域的回调",res);
         // ...完成你所有操作后记得删除script↓
         document.head.getElementsByClassName("script")[0].remove();
      }

      const scriptDom = document.createElement('script');
      scriptDom.type = 'text/javascript';
      scriptDom.class = 'script'; //用于删除
      // 传参一个回调函数名给后端,方便后端返回时执行这个在前端定义的回调函数
      scriptDom.src = 'http://192.168.1.200:8080/inface?callback=callBack';
      document.head.appendChild(script); //将标签挂载到dom上
</script>

这里需要注意的是,在使用完成之后需要删除script,否则越来越多的script标签就会随着请求挂载到DOM上。但是这种方案不建议使用。

使用前端代理

在每个框架中对于代理的设置是不一样的,但是不变的是他们都有一个配置文件,并且都会有一个proxy的字段来控制前端代理。所以我们可以在代理中对其跨域问题进行设置,这样,在调用的时候就不会出现前端跨域的情况。

使用Nginx来解决跨域

Nginx是现在使用比较多的服务器代理,在它的配置中也提供了服务端跨域解决方案。如下所示。

#如果监听到请求接口地址是 192.168.1.200/api/page ,
#nginx就向 http://192.168.1.201:9999/api/page这个地址发送请求
server {
     listen       80; 
        server_name  www.xxx.com;
        #判过滤出含有api的请求
        location /api/ { 
            proxy_pass http://192.168.1.201:9999; #真实服务器的地址
        }
}

我们知道Nginx是一个反向代理服务器,所以我们只需要保证Nginx与请求的同源策略,反向代理的通过接口调用的方式,所以可以直接使用这种配置方式。

增加逻辑层处理代码

简单的讲就是在代码中添加对应的配置项就可以解决跨域问题。


Access-Control-Allow-Origin:意思是安全通行请求。举个例子 http://192.168.1.200:8080 向http://192.168.1.201:8080 发送了请求,结果因为域名不一样,在返回信息的时候因为
IP地址不一致被拦截。

但是如果http://192.168.1.200:8080 在响应头中的
Access-Control-Allow-Origin
字段中携带上属性值'http://192.168.1.201:8080' 如下

//响应头
Access-Control-Allow-Origin':'http:/ /192.168.1.201:8080'

这就相当于告诉浏览器 http://192.168.1.200:8080 地址是安全的不要拦截。当然我们还可以通过设置如下的方式来进行所有域名不拦截配置。

//响应头
// * 代表所有域名均不拦截
Access-Control-Allow-Origin':'*'

总结

在Spring Boot项目中,通常会使用一个配置文件的方式来解决跨域问题。以上的几种方式都是在日常开发中常用到的方式。但是也有一些不推荐的使用方式,例如使用script的方式,使用设置请求头的方式,当然设置请求的方式在测试的时候可以使用,但是在实际线上的过程中就不建议使用。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2564.html

分享给朋友:

“最常见五种跨域解决方案” 的相关文章

html5+css3做的响应式企业网站前端源码

大家好,今天给大家介绍一款,html5+css3做的响应式企业网站前端源码 (图1)。送给大家哦,获取方式在本文末尾。首页banner幻灯片切换特效(图2)首页布局简约合理(图3)关于我们页面(图4)商品列表(图5)商品详情(图6)服务介绍(图7)新闻列表(图8)联系我们(图9)源码完整,需要的朋友...

最快清除数组空值?分享 1 段优质 JS 代码片段!

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!大家好,我是大澈!本文约 600+ 字,整篇阅读约需 1 分钟。今天分享一段优质 JS 代码片段,用最简洁的代码清除了数组中的空值。老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!const arr...

一起学Vue:路由(vue-router)

前言学习vue-router就要先了解路由是什么?前端路由的实现原理?vue-router如何使用?等等这些问题,就是本篇要探讨的主要问题。vue-router是什么路由是什么?大概有两种说法:从路由的用途上来解释路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同。从路由的实现原理上来解释路...

一套代码,多端运行——使用Vue3开发兼容多平台的小程序

介绍Vue3发布已经有一段时间了,从目前来看,其生态还算可以,也已经有了各种组件库给予了支持,但是不管是Vue3还是Vue2都无法直接用来开发小程序,因此国内一些技术团队针对Vue开发了一些多端兼容运行的开发框架,今天来体验一下使用Taro来体验一下使用Vue3开发多平台运行的小程序,以便于兼容各大...

vue.js 双向绑定如何理解,有什么好处!#云南小程序开发

Vue.js 的双向数据绑定是借助于 JavaScript 的一些特性,如对象的属性 getter 和 setter 以及 Vue 的依赖追踪系统实现的。简单来说,双向数据绑定就是数据与视图间的双向通信,也就是说数据的改变会马上反映到视图中,视图的改变也会立刻改变数据。具体来说,当你改变了数据时,视...

原生微信小程序打包成安卓/IOS应用!#小程序开发

原生微信小程序打包成公。好消息,微信小程序可以直接打包成APP了你们知道吗?微信团队近日开发了一个多端开发平台。多端据文档描述,多端开发框架是支持使用小程序原生语法开发移动端应用的框架。开发者可以一次编码分别编译为小程序安卓以及iOS应用,实现多端开发。我们进入多端框架开发的文档,来看看怎么使用微信...