uniapp Vue3中如何解决web/H5网页浏览器跨域的问题

 更新时间:2024年06月14日 10:34:16   作者:咸虾米_  
存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求,同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦,这篇文章主要介绍了在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题,需要的朋友可以参考下

问题复现

uniapp项目在浏览器运行,有可能调用某些接口会出现跨域问题,报错如下图所示:

在这里插入图片描述

什么是跨域?

存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求。同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦。一般来说,浏览器会根据请求来判断是否同源,判断的方式是通过判断两个URL的协议(http or https)、域名和端口是否相同来进行的。

在uniapp中出现跨域问题如何解决?

1.服务端设置CORS

在后端的响应头设置Access-Control-Allow-Origin属性,允许前端的访问:

Access-Control-Allow-Origin: *

如果条件允许,能给找到接口后端开发者,只需要响应头添加如此设置,前端即可正常访问;

但是后端往往考虑安全问题,API接口只允许自己公司项目使用,如果开启了运行跨域那么所有人都可以来蹭你的接口,导致没必要的消耗或暴露存在的安全漏洞。

或者用了别人的开源接口根本找不到开发者,所以这个方案依赖于别人,能不能解决跨域,那就随缘了。

2.在HBuilder编辑器中使用内置浏览器运行

在这里插入图片描述

如上图所示,uniapp项目使用内置浏览器预览调试,可以轻松解决接口在外部浏览器出现的跨域问题。

这种方案也是最简单方便的解决办法。

3.在vite.config.js中配置代理(vue3版本)

这种方案是开发vue项目最普遍的用法,在uniapp项目中依然适用,也是我重点给推荐的方式。

vue3是适用vite构建及打包的,所以在uniapp项目根目录下创建vite.config.js,拷贝如下代码:

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
export default defineConfig({
  plugins: [uni()],
  server: {
    host: "localhost", // 指定服务器应该监听哪个IP地址,默认:localhost
    port: 5173,        // 指定开发服务器端口,默认:5173
    proxy: {           // 为开发服务器配置自定义代理规则
       // 带选项写法:http://localhost:5173/api/posts -> http://jsonplaceholder.typicode.com/posts
      "/api": {
        target: "http://jsonplaceholder.typicode.com", // 目标接口
        changeOrigin: true,            // 是否换源
        rewrite: (path) => path.replace(/^\/api/, ""),
      }
    }
  }
});

假设接口为http://jsonplaceholder.typicode.com/posts ,那么发送网络请求的时候就可以使用如下方式了:

uni.request({
	url:"/api/posts"  //这里的/api相当于设置的target目标地址
}).then(res=>{
	console.log(res);
})

例:
接口地址:https://tiyu.baidu.com/api/match/playerranking/match/NBA/tabId/60

补充 vue.config.js中配置代理(vue2版本)

有些同学使用的是vue2版本开发项目,vue2和vue3的构建工具不同,下面介绍一下vue2版本如何配置代理。
1)在根目录下创建vue.config.js
2) 拷贝下面的代码

module.exports = {
  devServer: {
    disableHostCheck: true,
    proxy: {
      "/devapi": {
        target: "http://jsonplaceholder.typicode.com",        
        changeOrigin: true,
        secure: false,        
        pathRewrite: {
          "^/devapi": "/"
        }
      }
    }
  }
}

3)网络请求应用

uni.request({
	url:"/devapi/posts"  //这里的/devapi相当于设置的target目标地址
}).then(res=>{
	console.log(res);
})

详细视频教程

在这里插入图片描述

到此这篇关于在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题的文章就介绍到这了,更多相关uniapp Vue3跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue图片加载失败时用默认图片替换的方法

    vue图片加载失败时用默认图片替换的方法

    这篇文章主要给大家介绍了关于vue图片加载失败时用默认图片替换的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • 关于vue组件的更新机制 resize() callResize()

    关于vue组件的更新机制 resize() callResize()

    这篇文章主要介绍了关于vue组件的更新机制 resize() callResize(),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue+element遇到的坑及解决

    vue+element遇到的坑及解决

    这篇文章主要介绍了vue+element遇到的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue解析指令compile源码层面使用解析

    vue解析指令compile源码层面使用解析

    这篇文章主要为大家介绍了Vue编译器解析compile源码解析示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue项目之前端CryptoJS加密、解密代码示例

    vue项目之前端CryptoJS加密、解密代码示例

    在Vue项目中集成CryptoJS进行数据加密,首先需要通过npm安装CryptoJS安装包,然后在项目文件中引入CryptoJS,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • Vue3+Vue-cli4项目中使用腾讯滑块验证码的方法

    Vue3+Vue-cli4项目中使用腾讯滑块验证码的方法

    这篇文章主要介绍了Vue3+Vue-cli4项目中使用腾讯滑块验证码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-11
  • vue中利用Promise封装jsonp并调取数据

    vue中利用Promise封装jsonp并调取数据

    Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,这两个阶段在文中给大家提到。对vue中利用Promise封装jsonp并调取数据 的相关知识感兴趣的朋友,跟随小编一起看看吧
    2019-06-06
  • vue获取DOM节点的常用方法

    vue获取DOM节点的常用方法

    这篇文章主要给大家介绍了vue获取DOM节点的常用方法,使用ref属性,使用$el属性,使用querySelector和querySelectorAll,使用$refs和querySelector,这几种方法,需要的朋友可以参考下
    2023-10-10
  • vue如何统一样式(reset.css与border.css)

    vue如何统一样式(reset.css与border.css)

    这篇文章主要介绍了vue如何统一样式(reset.css与border.css),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue组件代码分块和懒加载讲解

    vue组件代码分块和懒加载讲解

    这篇文章主要介绍了vue组件代码分块和懒加载讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论