解决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')

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

相关文章
|
16天前
|
前端开发 开发工具 数据安全/隐私保护
大事件项目13----axios请求拦截器,统一携带token
大事件项目13----axios请求拦截器,统一携带token
|
13天前
|
前端开发 JavaScript 数据库
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
14 1
|
14天前
|
XML 前端开发 JavaScript
JavaEE:http请求 | 过滤器 | 同步与异步请求 | 跨域问题 | axios框架 有这一篇就够!
JavaEE:http请求 | 过滤器 | 同步与异步请求 | 跨域问题 | axios框架 有这一篇就够!
|
21天前
|
JavaScript
vue对axios封装
vue对axios封装
22 2
|
10天前
|
NoSQL 前端开发 测试技术
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
|
11天前
|
JSON 数据格式
axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
|
11天前
|
JavaScript
文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
|
11天前
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
12 0
|
12天前
|
前端开发
网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
数据交互,前后端数据请求,axios请求,对象结构的使用,E6的使用,结构赋值是什么?函数形参的obj如何,函数形参的obj就改成对象结构接收传入的数据对象
数据交互,前后端数据请求,axios请求,对象结构的使用,E6的使用,结构赋值是什么?函数形参的obj如何,函数形参的obj就改成对象结构接收传入的数据对象