Vue项目axios解决跨域问题No 'Access-Control-Allow-Origin' header is present on the requested resource

最新推荐文章于 2023-10-07 18:45:00 发布

平平无奇阿小黄

最新推荐文章于 2023-10-07 18:45:00 发布

阅读量1.1w

点赞数 1

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/YiQ137/article/details/105758065

版权

本文详细介绍了在Vue项目中使用axios遇到跨域问题的解决方案，包括配置proxyTable实现跨域请求，设置axios的baseURL和headers，以及如何正确发送post请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目中发请求时报了No ‘Access-Control-Allow-Origin’ header is present on the requested resource这个错误，这个错误就是典型的跨域问题

之所以会引发跨域问题，是因为

不同协议的网站不能相互访问
https://baidu.com 不能访问 http.baidu.com ，因为他们一个是http协议，一个是https协议
不同ip或者域名下的网站不能相互访问
https://baidu.com 不能访问 https://csdn.com
http://10.111.115.31 不能访问http://12.889.64.31
通过域名或者ip访问同一台服务器也属于跨域
假设http://10.111.115.31映射的域名是www.abc.com，它们之间相互访问就属于跨域问题。

因为一般我们的本地服务器地址是localhost8080，而后台给我们的地址可能是http://xxxx8181的，所以就会产生跨域的问题。要解决这个问题，如果你是vue项目且用axios的话，可以按照以下步骤进行解决。

1.在config文件下的index.js中的proxyTable加入以下代码：

在这里插入图片描述

 proxyTable: {
      '/api':{
        target: "http://123.xx.xx.xx:8181/shoppiing/",
        changeOrigin:true,
        pathRewrite:{
            '^/api':''
        }
      }
    },

2.在main.js添加axios的baseURL和hearder：

（请求地址可以看作是baseURL+url）

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

Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json';

Vue.config.productionTip = false

3.然后发请求的时候就可以直接发了：

async reginst () {
        const res = await this.$http.post('user/add', this.Rform)
        console.log(res)
      },

这里的this.Rform是我发post请求时要携带的数据，此案例中我所请求的地址为http://123.xx.xx.xx:8181/shopping/user/add