【跨域问题】vue3 + ts 跨域问题解决

已于 2023-07-16 14:53:19 修改
阅读量835 收藏 1
点赞数
文章标签： javascript vue.js 前端
于 2023-06-13 14:13:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46580991/article/details/131187077
版权

异常出现情况：

 解决问题：

1、把原来接口网址 xxx.xxx.xxx:8090 改为 自己本地开发接口端口

 2、然后在vite.config.ts文件里面进行代理设置

me_ll_you
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-cli配置axios
qq_40663787的博客
01-10 399
"use strict"; import Vue from 'vue'; import axios from "axios"; import VueAxios from 'vue-axios' // Full config: https://github.com/axios/axios#request-config // axios.defaults.baseURL = process.e...
Vue3+Ts+SpringBoot 跨域问题
weixin_52658189的博客
12-13 488
vue3+ts语法+springboot跨域实现
Vue开发中遇到的跨域问题及解决方法
10-15
在本篇文章里小编给大家整理的是关于Vue开发中遇到的跨域问题及解决方法，需要的朋友们可以学习下。
vue proxy代理失效无法跨域问题
前端成长之路
11-24 4171
今天在研究vue代理跨域的时候，发现了一个很奇怪的问题：vue配置代理访问本地的node接口时，出现跨域问题，但是proxy代理配置的又没有问题。
vue3+ts配置跨域报错问题解决：＞ newpro2@0.1.0 serve ＞ vue-cli-service serve ERROR Invalid options in vue.
肥晨开发的学习之路
03-25 889
Vue CLI 是一个基于 Vue.js 的全功能项目脚手架，它提供了丰富的插件系统和可配置的项目模板，帮助开发者快速搭建和启动 Vue.js 项目。通过 Vue CLI，你可以轻松管理项目的依赖、构建配置、代码风格等。
配置代理，解决vue-cli 3.x的跨域问题
【前端 · 小讴】的博客
09-25 1017
欢迎关注前端小讴的github，阅读更多原创技术文章 使用 Vue-cli 创建的本地项目，开发地址默认是 localhost:8080。全后端分离作业时，需要访问后台提供的非本机上接口，诚然我们可以让后台使用cors实现跨域，但一来有时后台太忙，二来也为了彰显前端开发人员的技术水平，利用node.js代理服务器是目前普遍又非常简单的办法，下面我们以iview-admin项目为例： ap...
vue技巧（九）跨域及跨域配置不生效原因探究
热门推荐
Interest1_wyt的博客
05-18 1万+
module.exports = { devServer: { port: 8888, //前端服务启动的端口号 host: 'localhost', //前端服务启动后的访问ip，默认为localhost, host和port组成了前端服务启动后的访问入口。 https: false, open: true, proxy: { '/k_olap_web': { //拦截上下文 .
Vite （Vue3 + TS）解决跨域问题
weixin_43518544的博客
07-12 4827
vue3 + ts 解决跨域问题
【记录】VUE3 + VITE + TS 配置跨域
pakhozou的博客
01-05 852
vue3 + vite + ts 配置跨域
vue3项目实战的请求接口问题（一）跨域问题+解决方法
XSL_HR的博客
11-11 6269
在请求接口的过程中，我们会碰到各种各样的问题，可以分为请求参数（Body）（参数名，数据格式）、请求地址（URL），其中请求地址会涉及到跨域问题的解决，从而实现请求地址的成功请求。本期文章将会介绍跨域问题，并推荐两种用在不同领域的解决方法。
Vue 3.x+axios跨域方案的踩坑指南
10-16
主要给大家介绍了关于Vue 3.x+axios跨域方案的踩坑指南，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue 3.x具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
01-19
我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢？ 这是因为CORS跨域分为 简单...
Spring boot+vue3+element plus实现后台管理系统
07-04
前后端分离项目，Spring boot作为后端，vue框架实现前端，后端整合swagger3测试工具，jwt实现验证码生成，awt生成图形验证码，整合邮箱验证，使用mybatis-generator自动生成实体类以及mapper，设置有拦截器验证登录...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
最新发布
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
vue3项目，vite+vue3+ts+pinia(8)-开发和生产模式配置+跨域(代理)
ybilss的博客
11-08 1715
简单封装axios, 跨域
1.vue3+vite开发中axios使用及跨域问题解决
lap2004的专栏
08-16 2625
vue3;vite;axios;跨域
vue3.0 + vue-cli4.5 + ts + SpringBoot 跨域登录
qq_40895460的博客
04-29 477
vue+Spring Boot跨域需要前后端一起操作 前端： requestURLAxios.ts import{ref}from"vue"; importaxiosfrom"axios"; //这里一行什么意思我也不知道，网上抄的（我的理解是后端地址暂时写一下而已，因为后面我们会替换的) axios.defaults.baseURL='/api'; //post方法 //url是后端地址，data是前端往后端发的数据 export function postUrlAxios...
vue3版本+TS(typescript)+简单封装api 配置反向代理
我只是个很菜的前端
02-08 2927
vue3版本+TS(typescript)+简单封装api 配置反向代理
Vue3+TS 怎么解决跨域
07-25
在 Vue3 中使用 TypeScript（TS）解决跨域问题，可以按照以下步骤进行操作： 1. 安装 `axios` 库：在项目根目录下打开终端，执行以下命令安装 `axios` 库。 ```bash npm install axios ``` 2. 在项目的 `src` 目录下创建一个 `api` 文件夹，并在其中创建一个名为 `index.ts` 的文件。 3. 在 `index.ts` 文件中编写跨域请求的代码，示例如下： ```typescript import axios from 'axios'; const instance = axios.create({ baseURL: 'http://api.example.com', // 设置基础URL timeout: 5000, // 设置请求超时时间 withCredentials: true // 允许发送跨域请求时携带凭证 }); export default instance; ``` 4. 在需要发送跨域请求的地方导入 `axios` 实例并使用，示例如下： ```typescript import axios from '@/api/index'; axios.get('/users') .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }); ``` 5. 在 Vue3 项目的根目录中找到 `vue.config.js` 文件（如果没有则创建），并添加以下配置： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', // 设置代理目标地址 changeOrigin: true, // 启用跨域 pathRewrite: { '^/api': '' // 将请求地址中的 /api 替换为空字符串 } } } } }; ``` 6. 重启开发服务器，重新编译项目。现在，你可以在 Vue3 中使用 TypeScript 发送跨域请求了。 以上是一种常见的解决跨域问题的方法，通过设置代理来实现跨域请求。根据你的实际需求，还可以使用其他方法进行跨域处理，如 JSONP、CORS 等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值