专栏首页RabbitMQ实战跨域的原因以及解决方案

跨域的原因以及解决方案

# 为什么会产生跨域问题

  1. 浏览器限制,目前所有浏览器都实现了同源策略规范。
  2. 请求方式Type为xhr。如果非xhr,如json,script则也不会存在跨域问题
  3. 请求方与服务方的源不同,即跨域,包括:
    1. 协议不同
    2. 域名不同
    3. 端口不同

同时满足三个条件才有可能产生跨域问题。

# 解决方案

  1. 对于浏览器限制的解决方案-关闭浏览器的同源策略检查

--args--disable-web-security--user-data-dir设置浏览器的启动参数,将浏览器的同源策略取消。该方式要求所用的用户进行手动操作,肯定是不现实的。

  1. 请求方式Type为xhr的解决方案 既然只有Type为xhr的请求才会存在跨域请求,那么我们是不是可以换一种请求方式呢。Jsonp的实现就是这样。将原本Type是xhr的请求伪造成script请求。 Jsonp的请求路径后面会自动带上callback参数,服务端可据此判断是否是jsonp请求,将返回值以script的形式进行封装。且服务端需要进行相应的改动。

对于SpringBoot项目

@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{
   public JsonpAdvice{
       super("callback");        //约定的jsonp请求参数
   }
}

JQuery实现jsonp的原理:

动态创建一个script,通过这个script去请求,请求完,该script即被销毁。可通过对jQuery打断点的方式验证。(可以看到JQuery在网页源代码嵌入了一个临时的script,当Jsonp请求完成之后,该Script即被销毁)

  • 弊端:
    • 服务器需要改动
    • 只支持GET方式 (因为获取script都是GET方式,前端指定请求方式也无效,还以GET方式发起的请求)

3. 对于域不同的解决方案

根据实际系统架构来决定使用哪种方式

  1. 被调用方解决 返回的响应头的包含允许跨域访问的信息,需要被调用方进行代码的修改。(可由具体应用添加允许跨域信息,也可以由容器,Tomcat,jetty等添加)
    1. 通过Filter实现
    2. 将允许跨域请求的信息配置在nginx或者apache转发服务器

2. 调用方解决

在调用方与被调用方中间再增加一层,该层做转发,将调用方的请求转发到被调用方。其中第一点因为调用方与该转发层在同一个域名下,所以不会有跨域问题。第二点,由于不是浏览器发起的请求,所以转发层调用被调用方也是不存在跨域问题的(参见跨域的三要素)。

简单请求与非简单请求

当浏览器发起一个跨域请求的时候会先判断是简单请求还是非简单请求。

对于简单请求,浏览器会先请求,拿到结果后再判断是否跨域。

对于非简单请求,浏览器会先发起一个预检options请求,检查通过之后再发起实际的请求。

对于带cookie的跨域请求,

  1. 需要将allowedOrigins设置为具体的origin,而不能使用 *
  2. 需要设置响应参数 allowCredentials(true),允许带cookie的跨域

本文分享自微信公众号 - 喜欢天文(AllUnderControl),作者:UnderControl

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【NIO】NIO版本鸿儒聊天室

    喜欢天文的pony站长
  • 【NIO】NIO实现HTTP服务器

    喜欢天文的pony站长
  • 将jar包发布到本地maven仓库

    3. 发布该jar包到本地maven仓库(错误示范) $ mvn install:install-file-Dfile=C:\Users\11851\Downl...

    喜欢天文的pony站长
  • 允许浏览器跨域访问web服务端的解决方案

      今天和同事探讨了前后端如何真正实现隔离开发的问题,如果前端单独作为服务发布,势必会涉及到无法直接调用后端的接口的问题,因为浏览器是不允许跨域提交请求的。

    程序员一一涤生
  • AI 时代的人机协同创作

    这是mixlab社区成员00-ML04的文章,总结了她在4月的一次活动中分享的内容。

    mixlab
  • 破解 AI 时代的焦虑 —— 从人机交互到人机协同创作

    这是我在 4 月做的一次分享。大概是我做过的分享中,现场讨论气氛最热烈的一次了。最近抽空整理成文章,希望大家可以继续讨论这个有趣、有争议的话题。

    mixlab
  • Javascript跨域后台设置拦截

    子域名之间互相访问需要跨域 结论放在开头: 服务端必须设置允许跨域 客户端带cookie需要设置withCredentials 无论服务端是否允许跨域,该req...

    Ryan-Miao
  • React技巧7(TodoList实现3组件之间传递数据之优化)

    本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React 技巧1(状态组件与无状态组件的使用) --...

    前端人人
  • 七夕用鹅厂最热门的六大编程语言写三行情书

    点击上方蓝字“ITester软件测试小栈“关注我,每周一、三、五早上 08:30准时推送,每月不定期赠送技术书籍。

    ITester软件测试小栈
  • C# 里面很少人知道但很好用的 Tuple 转换

    小伙伴们都知道有 Tuple 但是很少有小伙伴只有原来从一个类转换为一个 Tuple 的方式如此简洁,在 C# 最新版本里面提供了一组语法糖,可以便捷给任意的类...

    林德熙

扫码关注云+社区

领取腾讯云代金券