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

淩亂°似流年 2024-03-27 16:44 34阅读 0赞

## 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')

然后重启项目就可以了  
示例：  
![在这里插入图片描述][8ef99672804740df8eb26916d5745656.png]  
![在这里插入图片描述][71bc663400344c27b2ab4245720f00ff.png]  
成功。

[8ef99672804740df8eb26916d5745656.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9bdd148d1c7048859f9bdda69988e34a.png
[71bc663400344c27b2ab4245720f00ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/33b0f4a43dbd484e8a3319d2df950d6d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，34人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3.x axios跨域请求的问题

描述一般请求的url地址与项目所在地址不一致便会触发跨域请求，若没有跨域措施，一般会抛出No 'Access-Control-Allow-Origin' 错误 ...

阳光穿透心脏的1/2处/ 2024年04月18日 13:54/ 0 赞/ 37 阅读

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

0 写在前面在程序开发时，前后端运行在不同的地方。假设自己的电脑启动前后端，那么他们的端口号不可以冲突。当在Vue发起请求，那么就存在跨域的问题，会被浏览器COR

淩亂°似流年/ 2024年03月27日 16:44/ 0 赞/ 35 阅读

相关 Vue使用Axios实现http请求以及解决跨域问题

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios的中文文档以及github地址如下：中文：[https://www

柔情只为你懂/ 2023年08月17日 17:38/ 0 赞/ 91 阅读

相关 vue前端解决跨域问题（axios）

vue前端解决跨域问题（axios） 1、安装环境 2、配置代理 1.在config文件夹下的index.js文件中的proxyTable字段中，

朴灿烈づ我的快乐病毒、/ 2023年02月18日 01:57/ 0 赞/ 90 阅读

相关 Axios发送请求的时候出现跨域问题

报错信息如下： ![20210309145223976.png][] 跨域问题发生的原因：首先基于安全的原因，浏览器是存在[同源策略][Link 1]这个机制的，同源策

淩亂°似流年/ 2022年10月23日 08:01/ 0 赞/ 146 阅读

相关 React Axios 请求解决跨域问题

网上看了很多的方案，但是不知道为什么，作为初学者，对react不太清楚的话，解决跨域还是有很多的问题。这篇博客针对小白，第一次调试react 跨域问题，甚至第一次使用Axios

秒速五厘米/ 2022年09月10日 02:29/ 0 赞/ 278 阅读

相关 Vue使用Axios实现http请求以及解决跨域问题

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios的中文文档以及github地址如下：中文：[https://www

墨蓝/ 2022年05月15日 00:43/ 0 赞/ 441 阅读

相关 Vue使用axios、解决axios跨域

axios [axios文档][axios] > axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端从浏览器中创建 XML

骑猪看日落/ 2022年03月06日 10:38/ 0 赞/ 594 阅读

相关解决axios跨域时，发送post请求变options的问题

mounted() { let config = { headers : { 'Content-Type':'appli

深藏阁楼爱情的钟/ 2022年02月27日 08:20/ 0 赞/ 251 阅读

相关 vue axios解决跨域

axios解决跨域 1、在config中的index.js文件中将proxyTable后的内容修改为:

阳光穿透心脏的1/2处/ 2021年07月24日 12:46/ 0 赞/ 466 阅读