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

淩亂°似流年 2024-03-27 16:44 99阅读 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 条评论，99人围观）

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

相关阅读

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

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

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

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

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

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

相关 VUE axios POST 发送跨域 cros 问题

阅读目录服务器 PHP 端代码 Vue 端 axios 请求服务器 PHP 端代码在请求的方法里添加如下代码： header('Acc

柔光的暖阳◎/ 2023年10月07日 20:27/ 0 赞/ 17 阅读

相关解决Axios跨域问题（Axios跨域问题解决方案）

问题背景 Axios是不允许跨域访问的，别说跨域，跨端口都不行。例如某项目我本地vue前端frontEnd为`localhost:8889`，Java后台 backEnd

以你之姓@/ 2023年02月25日 08:38/ 0 赞/ 40 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 vue axios解决跨域

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

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