网站页面架构图外链发布工具

跨域原因

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

现象

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

前端解决方案

在vue.config.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地址

    axios.get('/login', {params: {username: this.loginData.username,password: this.loginData.password}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
``这样，请求就不会报跨域错误了