【踩坑系列】uniapp之h5 跨域的问题

【踩坑系列】uniapp之h5 跨域的问题

前言

在浏览器上调试移动端的界面,出现 不允许出现多个 ‘Access-Control-Allow-Origin’ CORS 头信息。 而且看到Response 返回的信息,以为是服务器上出现配置了多次 跨域访问的设置,才导致的问题,所以一直在找后端上的问题,花了一段时间排查后,并没有配置多次跨域访问的设置,而且移动端的真机上可以正常访问,这才扭转了排查的思路,从前端上面入手解决问题。

在这里插入图片描述

什么是跨域

跨域是浏览器的专用概念,指js代码访问自己来源站点之外的站点。比如A站点网页中的js代码,请求了B站点的数据,就是跨域。
A和B要想被认为是同域,则必须有相同的协议(比如http和https就不行)、相同域名、和相同端口号(port)。

如果你是做App、小程序等非H5平台,是不涉及跨域问题的。

在这里插入图片描述

如何解决

解决方案:uni-app官方推荐使用HBuilderX中内置的浏览器去预览,在内置的浏览器中不会存在跨域问题;但是要是在Chrome 浏览器中预览的话就会出现这个跨域问题,官方推荐使用安装Allow-Control-Allow-Origin: * 插件的方式去解决。参考uni-app H5跨域问题解决方案(CORS、Cross-Origin)

# 是否允许跨域访问 CORS,如果允许,设置允许的域名
  accessControlAllowOrigin: '*'

  # 允许跨域访问时 CORS,可以获取和返回的方法和请求头
  accessControlAllowMethods: GET, POST, OPTIONS
  accessControlAllowHeaders: content-type, x-requested-with, x-ajax, x-token, x-remember
  accessControlExposeHeaders: x-remember

参考文章

uni-app H5跨域问题解决方案(CORS、Cross-Origin)

uni-app之H5端跨域问题解决方案


版权声明:本文为QQ736238785原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。