vue-axios跨域问题

Michael.Scofield2025-04-07 14:47

vue-axios跨域问题

跨域原因

跨域：浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。

在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。跨域问题来源于JavaScript的同源策略，即只有协议+主机名+端口号(如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的。而axios是通过Promise实现对ajax技术的一种封装，也同样存在跨域问题。

现象

vue项目使用端口8080，后端项目使用端口9090，当在vue项目中使用axios直接请求后端9090端口api时，控制台报错

前端解决方案

在vue.config.js中配置允许跨域

js 复制代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
        // 匹配以 /login 开头的请求路径
        '/login': {
            // 目标服务器地址
            target: 'http://192.168.88.128:9090', 
            // 允许跨域
            changeOrigin: true, 
        }
    }
}
})

在使用axios请求后端接口时，省略服务器ip地址

js 复制代码

    axios.get('/login', {
    params: {
      username: this.loginData.username,
      password: this.loginData.password
    }
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
``


这样，请求就不会报跨域错误了