解决Vue中Axios发送请求时跨域的问题。

简介: 解决Vue中Axios发送请求时跨域的问题。

0 写在前面

在程序开发时,前后端运行在不同的地方。假设自己的电脑启动前后端,那么他们的端口号不可以冲突。
当在Vue发起请求,那么就存在跨域的问题,会被浏览器CORS阻止:原因是没有解决跨域的问题。

1 解决

vue使用axios

module.exports = defineConfig({
  // 跨域问题
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:7430/api/',// 后端接口--->其中7430是自己后端的端口号
        changeOrigin: true, // 是否跨域
      }
    }
  }

})

main.js中

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$axios = axios

new Vue({
    ……
  render: h => h(App)
}).$mount('#app')

然后重启项目就可以了
示例:
在这里插入图片描述
在这里插入图片描述
成功。

相关文章
|
JavaScript
vue2的Mounted和vue3的onMounted,这两个钩子有何不同?
vue2的Mounted和vue3的onMounted,这两个钩子有何不同?
950 0
|
JSON 虚拟化 Docker
Windows10 Docker安装和docker-compose 安装
Windows10 Docker安装和docker-compose 安装
929 0
|
前端开发 应用服务中间件 nginx
Docker部署nginx并内网部署更新
Docker部署nginx并内网部署更新
616 0
|
JavaScript 网络协议 PHP
使用阿里云npm镜像加速
npm(node package manager)是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下,出现版本提示表示安装成功
46196 3
|
安全 应用服务中间件 PHP
NGINX文件解析漏洞
NGINX文件解析漏洞
334 0
|
JavaScript
vue路由跳转报错Uncaught SyntaxError:Unexpected token ‘<‘ (at chunk-elementUI.aeed1b74.js:1:1)Uncaught Synt
vue路由跳转报错Uncaught SyntaxError:Unexpected token ‘<‘ (at chunk-elementUI.aeed1b74.js:1:1)Uncaught Synt
842 0
|
存储 索引
SwiftUI极简教程19:SwipeCard卡片滑动效果的使用(下)
SwiftUI极简教程19:SwipeCard卡片滑动效果的使用(下)
705 0
SwiftUI极简教程19:SwipeCard卡片滑动效果的使用(下)
|
存储 Java iOS开发
iOS 通讯录中文排序、全拼音排序
在做项目的时候,总遇到排序问题,英文排序是很简单的,直接使用compare方法就可以实现了,但是一旦遇到中文,就显得麻烦了。
320 0
|
编解码 监控 安全
GB/T28181-2022针对H.265编码细化及技术实现
新版国家标准GB/T28181-2022《公共安全视频监控联网系统信息传输、交换、控制技术要求》已于2022年12月30日发布,并将于2023年7月1日正式实施。
183 0

热门文章

最新文章