当前位置: 首页 > news >正文

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

目录

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.lryc.cn/news/94415.html

相关文章:

  • 使用gradio库的File模块实现文件上传和展示
  • 网络安全进阶学习第四课——SSRF服务器请求伪造
  • js处理扁平数组和树结构相互转换
  • Spark弹性分布式数据集
  • ffmpeg学习记录
  • ChatGPT:为教育创新提供五大机遇
  • Educational Codeforces Round 151 (Rated for Div. 2)
  • 【AI机器学习入门与实战】机器学习算法都有哪些分类?
  • React之hooks
  • 1.监控分布式--zabbix
  • java stream 多个集合去重取交集
  • 给LLM装上知识:从LangChain+LLM的本地知识库问答到LLM与知识图谱的结合
  • 视频与AI,与进程交互(二) pytorch 极简训练自己的数据集并识别
  • LLM - 第2版 ChatGLM2-6B (General Language Model) 的工程配置
  • 从0开始,手写MySQL事务
  • React中useState的setState方法请求了好多次
  • 【MYSQL基础】基础命令介绍
  • 多元回归预测 | Matlab基于灰狼算法优化深度置信网络(GWO-DBN)的数据回归预测,matlab代码回归预测,多变量输入模型
  • 校园wifi网页认证登录入口
  • [SpringBoot]Spring Security框架
  • Unity 之 抖音小游戏本地数据最新存储方法分享
  • 逍遥自在学C语言 | 函数初级到高级解析
  • Elastic 推出 Elastic AI 助手
  • 【数据库】MySQL安装(最新图文保姆级别超详细版本介绍)
  • 前端使用pdf-lib库实现pdf合并,window.open预览合并后的pdf
  • 计算机网络相关知识点总结(二)
  • Redmine与Gitlab整合(实战版)
  • (3)深度学习学习笔记-简单线性模型
  • pytorch3d 安装报错 RuntimeError: Not compiled with GPU support pytorch3d
  • spring工程的启动流程?bean的生命周期?提供哪些扩展点?管理事务?解决循环依赖问题的?事务传播行为有哪些?