vue 访问第三方 跨域, 配置vue.config.js

news2024/11/26 11:30:41

目录

0 config 文件被修改 一个要重启vscode 配置文件才会生效

1 第一种 (有两种写法)

1.1 配置vue.config.js 

1.2 axios 使用

1.3 终端打印

2 第二种方法 --> 错误 --> 没有运行成功

2.1 配置vue.config.js  --> 就是api 不被设置成 替换为 /

2.2 axios 使用

2.2.1 错误尝试1 

 2.2.2 错误尝试2


0 config 文件被修改 一个要重启vscode 配置文件才会生效

1 第一种 (有两种写法)

1.1 配置vue.config.js 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {

    proxy: {
      "/api/": {
        target: 'https://echarts.apache.org',
        changeOrigin: true, // 跨域访问设置,true代表跨域
        ws: true,
        'secure': true, // false为http访问,true为https访问
        'pathRewrite': { // 路径改写规则
          '^/api/': "/" // 以/api/为开头的改写为'/'
        }
      },
    },
  },
})

1.2 axios 使用

let url = '/api/examples/data/asset/data/stock-DJI.json'    这里会匹配到前面我们设置的/api/',代替为https://echarts.apache.org/examples/data/asset/data/stock-DJI.json',
       /**
          逻辑
          首先 url 中的 /api/ 被替换成 /
          然后 url 被拼接 target的值  + url的值(被替换后的值)
        */
      // console.log('url', url)
      this.axios.get(url).then((rawData) => {
        console.log('---url---', url)
        console.log('---rawData-', rawData)
        var data = splitData(rawData.data);

1.3 终端打印

2 第二种方法 --> 错误 --> 没有运行成功

2.1 配置vue.config.js  --> 就是api 不被设置成 替换为 /

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {

    proxy: {
      "/api/": {
        target: 'https://echarts.apache.org',
        changeOrigin: true, // 跨域访问设置,true代表跨域
        ws: true,
        'secure': true, // false为http访问,true为https访问
        // 'pathRewrite': { // 路径改写规则
         // '^/api/': "/" // 以/api/为开头的改写为'/'
        //}
      },
    },
  },
})

2.2 axios 使用

2.2.1 错误尝试1 

 let url = '/api/examples/data/asset/data/stock-DJI.json'   
      // console.log('url', url)
      this.axios.get(url).then((rawData) => {
        console.log('---url---', url)
        console.log('---rawData-', rawData)

 2.2.2 错误尝试2

let url = 'examples/data/asset/data/stock-DJI.json'  
      // console.log('url', url)
      this.axios.get(url).then((rawData) => {
        console.log('---url---', url)
        console.log('---rawData-', rawData)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/720610.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux初阶】理解一切皆文件 文件属性结构体底层 引用记数

🌟hello,各位读者大大们你们好呀🌟 🍭🍭系列专栏:【Linux初阶】 ✒️✒️本篇内容:理解一切皆文件,文件属性结构体底层理解(struct file、引用记数) &#x1…

记一次被通报的挖矿事件应急响应

为方便您的阅读,可点击下方蓝色字体,进行跳转↓↓↓ 01 事件背景介绍02 定位挖矿主机03 挖矿主机分析04 入侵路径梳理05 安全加固建议 01 事件背景介绍 某单位被上级单位通报,单位的出口IP和境外IP有异常通信行为,要求进行紧急处置…

【MySQL】何为MySQL,一文告诉你答案

文章目录 前言Oracle(甲骨文公司)MySQL关系型数据库应用环境特性 前言 在认识JAVA一文中我们有谈到过收购Sun公司的Oracle(甲骨文公司)1,今天我们要介绍的MySQL就属于 Oracle 旗下产品。 Oracle(甲骨文公司…

远航汽车:坚持合作共赢经营理念 携手志同道合者共创美好未来

智能汽车时代,想要打造一款真正符合用户需求的新能源车,势必要具备硬核技术实力以及敢于突破、不断求变的思维,始终做到以用户为中心,打造属于自己的品牌核心力,才能从激烈的市场竞争中脱颖而出。在此背景下&#xff0…

【电路原理学习笔记】第2章:电压、电流和电阻:2.6 电路

第2章:电压、电流和电阻 2.6 电路 2.6.1 电流的方向 电流方向有两种说法,一种按电子流动方向,另一种是传统的认为从正极流出到负极,这本教材采用传统电流方法。(事传统派,维新派输了,1&#…

全新QQ架构的“NT”版来袭

最近,全新发布的"NT"架构的QQ迎来了更新,同时面向用户开放了下载渠道,有些用户戏称为NT为脑瘫版本(bushi)苏音体验了以后,描述为:清爽简约还很流畅。 先来看看原来的QQ与现在的NT版本…

【Linux】Selinux基本了解

文章目录 SElinux1.简介2.基本概念3.规则4.策略5.工作模式 SElinux 1.简介 SELinux是一个内核级别的安全机制,从Linux2.6内核之后就将SELinux集成在了内核当中。因为SELinux是内核级别的,所以我们对于其配置文件的修改都是需要重新启动操作系统才能生效…

仿真模拟-Abaqus2021、Abaqus2022 安装下载教程

ABAQUS 是一套功能强大的工程模拟的有限元软件,其解决问题的范围从相对简单的线性分析到许多复杂的非线性问题。 ABAQUS 包括一个丰富的、可模拟任意几何形状的单元库。并拥有各种类型的材料模型库,可以模拟典型工程材料的性能,其中包括金属、…

Addressable 资源管理全解

这里写目录标题 一、什么是Addresables二、导入Addressables三、创建Addressables Settings 资产包管理四、资源集合Group的基本操作(资源分包)五、设置远程资源包六、如何打包七、加载方式7-1. Mono脚本指定和实例化:7-2. 直接实例化指定物体…

Neo4j docker 部署

想要运行简单测试一下neo4j,就直接使用docker创建了一个容器,并用cypher-shell本地连接neo4j,创建图进行测试。 1 开启docker sudo systemctl start docker2 拉取镜像源 sudo docker pull neo4j # 默认latest版本3 查看本地镜像&#xff0…

二叉树之按之字形顺序打印二叉树

主要看队列的应用与了解,就是利用先进先出的特点。先把每个节点塞入队列,再根据先进先出的特点来把自身值传入一维vector数组中去。 /*** struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* TreeNode(int x) : val(x), l…

作为爬虫工程师,自动化和抓包你说不了解的selenium采集内容篇!

前言 作为爬虫工程师,掌握Selenium采集是非常有用的,因为有些网站采用了动态加载、javascript渲染或AJAX技术,这些技术使得使用传统的静态HTML解析库难以获取到完整的数据。Selenium是一个自动化测试工具,它可以模拟用户在浏览器…

java特征:多态性

文章目录 多态的形式和体现对象的多态性多态的理解举例**1、方法内局部变量的赋值体现多态****2、方法的形参声明体现多态****3、方法返回值类型体现多态** 成员变量没有多态性向上转型与向下转型为什么要类型转换如何向上或向下转型instanceof关键字 多态的形式和体现 对象的…

【电路原理学习笔记】第2章:电压、电流和电阻:2.4 电流

第2章:电压、电流和电阻 2.4 电流 电压为电子提供能量,使它们能够在电路中运动。在金属导体中,电子的运动就是电流,电流的存在意味着在电路中存在着做功的过程。 自由电子存在于导体和半导体中。这些价电子层上的电子可以从材料…

微信小程序数据绑定及渲染

微信开发文档&#xff1a;WXML | 微信开放文档 (qq.com) 数据绑定 简单数据绑定 小程序原生支持数据的双向绑定&#xff0c;在wxml文件里面可以使用 Mustache 语法(双{{ }}方法)绑定js文件中data里面的属性 示例&#xff1a; wxml文件内容&#xff1a; <view> {{ mess…

ChromaVerse专注于AIGC元宇宙产业

在元宇宙与互联网 3.0 概念的推动下&#xff0c;各种虚拟数字人扑面而来&#xff0c;AIGC 产业成为各方关注的重点。未来 AI 发展已经成为全球科技领域的热点和趋势。AI 技术的快速进步和广泛应用正在改变人们的生活和工作方式&#xff0c;为各行各业带来了巨大的机遇和挑战。在…

Jmeter接口测试,怎么在下一个接口调用上一个接口的数据

1、简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具。用于对软件做压力测试&#xff0c;它最初被设计用于Web应用测试但后来扩展到其他测试领域。 它可以用于测试静态和动态资源例如静态文件、Java 小服务程序、CGI 脚本、Java 对象、数据库&#xff0c; FTP 服务…

MacOS在终端中使用sshpass命令登录服务器

MacOS在终端中使用sshpass命令登录服务器&#xff08;堡垒机&#xff09; sshpass 可以解决ssh时密码交互输入的麻烦。 目前堡垒机不支持密钥&#xff0c;使用sshpass命令可以较便捷地连接服务器。 sshpass -p password ssh -p 22 userftm.test.com# 注意user中如果有&…

SpringBoot 基于Redis的消息队列(基于发布订阅模型)

SpringBoot下Redis消息队列(基于发布订阅模型) 1. 什么是生产者/消费者模式&#xff1f; 消息队列一般是有两种场景 1、种是发布者订阅者模式 2、种是生产者消费者模式 生产者消费者模式 &#xff1a;生产者生产消息放到队列里&#xff0c;多个消费者同时监听队列&#xff0…

详解DNS协议!

前言 想要不同的计算机之间进行通信&#xff0c;是需要知道对方的IP的&#xff0c;可是为什么我们平时很少用到ip&#xff0c;而是用到域名这种东西呢&#xff1f; 其实主要是为了方便阅读&#xff0c;让我们记住一串的ip还不如记域名来的方便。 当我们访问域名的时候&#xf…