返回顶部
首页 > 资讯 > 前端开发 > JavaScript >uniapp使用H5调试时跨域问题解决
  • 952
分享到

uniapp使用H5调试时跨域问题解决

2024-04-02 19:04:59 952人浏览 薄情痞子
摘要

用uniapp开发APP时,为了开发方便,经常是H5开发好,然后再弄APP的兼容性问题。所以可能会涉及到跨域,此时也可以让后端同学帮忙,但是求人不如自己搞,所以分享一套跨域方法,其实

用uniapp开发APP时,为了开发方便,经常是H5开发好,然后再弄APP的兼容性问题。所以可能会涉及到跨域,此时也可以让后端同学帮忙,但是求人不如自己搞,所以分享一套跨域方法,其实也是webpack开发Vue跨域的方法。废话不啰嗦,上代码。两个地方都可以配置效果一样取其一即可,第一个是vue.config.js,manifest.JSON源码

module.exports = {
    // 配置路径别名
    configureWEBpack: {
        devServer: {
            disableHostCheck: true,
            proxy: {
                //配置跨域
                '/api': {
                    target: "Http://www.xxx.com/",//转发的目标地址
                    secure : false,
                    chanGorigin: true,
                    // pathRewrite: { //是否重写 如果重写的话,本地/api/a1/b1 就回变成/a1/b1 
                    //     '^/api': '' //意思就是把api这个替换成空 ''
                    // }
                }
            }
        }
    }
}

manifest.json源码视图直接上截 图方便理解,再次解释一下pathRewrite,很多人会因为这个导致无法使用

另外一旦在本地配置了,这个跨域代理,老是切换开发环境要变地址,官方也支持开发环境。

const baseURL = process.env.node_ENV === 'development' ? "/api/" : "https://www.正式地址.com/api/";

环境具体介绍

看到这里其实有的读者还是不太明白具体咋搞,或者按照这个代码写了还是不能成功使用,再用一些例子帮助你明白具体做了什么操作。
假设本地端口为localhost:9000,服务器测试地址为http://www.xxx.com,直接请求报跨域错误。
有两个请求的接口为http://www.xxx.com/api/test/t1,http://www.xxx.com/api/test/t2。
一般会封装地址,例如function getT1()地址为"text/t1",function getT2()地址为"text/t2"。
这时候api/就可以提取出来作为baseUrl,前面的代理,就可以配置/api 匹配api这个字段,把这个字段作为条件,
一旦匹配这个字段,就把这个字段的请求地址换成target定义的地址。

现在接口改了有两个请求的接口为http://www.xxx.com/api1/test1/t1,http://www.xxx.com/api2/test2/t2,
都不一样了也没有公共字段了,那我要怎么配置代理呢。这时候就用到pathRewrite,在接口的时候的时候认为的加一个识别标签,然后用重写给他去除后得到实际地址。代码如下

const baseURL = process.env.NODE_ENV === 'development' ? "/devApi/" : "https://www.正式地址.com/api/";//人为的在baseUrl中加入devApi
vue.config.js
module.exports = {
    // 配置路径别名
    configureWebpack: {
        devServer: {
            disableHostCheck: true,
            proxy: {
                //配置跨域
                '/devApi': {
                    target: "http://www.xxx.com/",//转发的目标地址
                    secure : false,
                    changOrigin: true,
                    pathRewrite: { 
                        '^/devApi': '' //意思就是把devApi这个替换成空 ''
                    }
                }
            }
        }
    }
}

本地请求的localhost:9000/devApi/api1/test1/t1 经过代理变成 http://www.xxx.com/api1/test1/t1

最后的最后,提醒一下,每次修改完配置,一定要记得关闭重新编译一下。

附上webpack对proxy的配置说明

到此这篇关于uniapp使用H5调试时跨域问题解决的文章就介绍到这了,更多相关uniapp H5跨域内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: uniapp使用H5调试时跨域问题解决

本文链接: https://lsjlt.com/news/165413.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • uniapp使用H5调试时跨域问题解决
    用uniapp开发APP时,为了开发方便,经常是H5开发好,然后再弄APP的兼容性问题。所以可能会涉及到跨域,此时也可以让后端同学帮忙,但是求人不如自己搞,所以分享一套跨域方法,其实...
    99+
    2024-04-02
  • 解决 PHP Session 跨域问题的调试技巧
    随着互联网的普及,Web 应用程序的开发越来越受到人们的关注。在开发 Web 应用程序时,经常会遇到跨域问题,例如在一个域名下的 PHP 程序需要访问另一个域名下的 Session 数据。在这篇文章中,我们将讨论如何解决 PHP Sessi...
    99+
    2023-10-21
    PHP跨域问题解决 Session调试技巧
  • 【uniapp】uni.request请求跨域问题解决方案
    例如,运行H5页面,请求一个地址资源,如果不是本站地址,浏览器就会报跨域错误,这样访问受限 问题呈现 例如,项目代码里是这样写的,运行H5测试 uni.request({url:'https://gi...
    99+
    2023-09-20
    uni-app 前端 服务器 跨域访问 代理访问
  • 使用Nginx解决跨域问题
    目录 使用Nginx解决跨域问题 1、修改浏览器、客户端访问地址 2、在nginx.conf配置文件需配置server 3、在Nginx中配置客户端访问的接口(按照规则或通配),并设置被代理的服务器 4、在Nginx中统一配置客户端访问的...
    99+
    2023-09-02
    nginx 运维 服务器
  • 如何解决Flex跨域调用Webservice问题
    这篇文章将为大家详细讲解有关如何解决Flex跨域调用Webservice问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Flex跨域调用Webservice问题最近在用Flex做一个项目,在本机调试一切...
    99+
    2023-06-17
  • 使用Java如何解决跨域问题
    本篇内容主要讲解“使用Java如何解决跨域问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“使用Java如何解决跨域问题”吧!跨域问题现在绝大多数公司的项目都是...
    99+
    2024-04-02
  • 使用Java怎么解决跨域问题
    今天就跟大家聊聊有关使用Java怎么解决跨域问题,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。什么是跨域(CORS)跨域(CORS)是指不同域名之间相互访问。跨域,指的是浏览器不能执...
    99+
    2023-06-06
  • 解决vue cli3使用axios跨域问题
    目录一、什么是跨域1、跨域2、同源策略3、跨域问题怎么出现的二、使用 axios 演示并解决跨域问题(vue-cli3.0)1、项目创建、与 axios 的使用2、跨域问题重现3、解...
    99+
    2024-04-02
  • Nginx解决跨域问题
    目录 前言 一、跨域问题 1.什么是跨域  2.CORS 二、Nginx跨域处理 三.补充 前言 这几天出现了一个问题,我们中的一个A系统需要给B系统调用,造成了跨域问题。 一、跨域问题 1.什么是跨域 当一个请求url的协议、域...
    99+
    2023-09-02
    nginx 服务器 开发语言
  • 如何使用Nginx解决跨域问题详解
    目录先来说一下什么是同源策略什么是跨域?跨域分类Nginx解决跨域问题解释1、Access-Control-Allow-Origin2、Access-Control-Allow-He...
    99+
    2024-04-02
  • 解决 Axios 跨域问题,轻松实现接口调用
    跨域是指访问另外一个域的资源,由于浏览器的同源策略,默认情况下使用 XMLHttpRequest 和 Fetch 请求时是不允许跨域的。跨域的根本原因是浏览器的同源策略,这是由浏览器对 JavaScript 施加的安全限制。 Axios...
    99+
    2023-10-25
    前端 后端 java json javascript
  • 解决Django cors跨域问题
    Django cors跨域问题 前后端分离项目中的跨域问题 即同源策略 同源策略:同源策略/SOP(Same origin policy)是一种约定,由 Netscape 公司 19...
    99+
    2024-04-02
  • 如何解决使用canvas绘图时遇到的跨域问题
    这篇文章主要介绍了如何解决使用canvas绘图时遇到的跨域问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。当在canvas中绘制一张外链图片时,我们会遇到一个跨域问题。示例...
    99+
    2023-06-09
  • fetch跨域问题的使用详解
    一、介绍 fetch 提供了一个获取资源的接口 (包括跨域)。 fetch 的核心主要包括:Request , Response , Header , Body 利用了请求的异步特性...
    99+
    2024-04-02
  • 解决Vue+SpringBoot+Shiro跨域问题
    目录一、配置Vue前端1、开发跨域配置2、生产跨域配置二、配置spring boot相信大家刚开始做都会遇到这个问题,在网上找了好多也不管用,都写的不全, 在这里记录一下,希望对大家...
    99+
    2024-04-02
  • ASP.NET中WebAPI解决跨域问题
    一、什么是跨域问题 跨域:指的是浏览器不能执行其他网站的脚本。是由浏览器的同源策略造成的,是浏览器施加的安全限制。(服务端可以正常接收浏览器发生的请求,也可以正常返回,但是由于浏览器...
    99+
    2024-04-02
  • javascript怎么解决跨域问题
    这篇文章主要介绍了javascript怎么解决跨域问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。javascript 跨域问题以及解决办...
    99+
    2024-04-02
  • vue2.0跨域问题怎么解决
    本篇内容主要讲解“vue2.0跨域问题怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue2.0跨域问题怎么解决”吧! 一种解决方案: 一般的情况下...
    99+
    2024-04-02
  • 怎么解决ajax跨域问题
    本篇内容主要讲解“怎么解决ajax跨域问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么解决ajax跨域问题”吧!什么是ajax跨域ajax跨域的原理aja...
    99+
    2024-04-02
  • ajax如何解决跨域问题
    小编给大家分享一下ajax如何解决跨域问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!跨域同源策略限制同源策略阻止从一个域上加...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作