Vue3 + axios 前端跨域

同源策略是指在Web浏览器中，允许某个网页脚本访问另一个网页的数据，但前提是这两个网页必须有相同的URI、主机名和端口号，一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。因为浏览器内部有一种约定叫做同源策略它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。原文链接：https://blog.csdn.net/qq_41880073/arti

m0_71126733

472人浏览 · 2023-04-04 08:52:59

m0_71126733 · 2023-04-04 08:52:59 发布

Vue3前端跨域

一、情景再现

环境：vue3 + axios

在这里插入图片描述

二、为什么会产生跨域

因为浏览器内部有一种约定叫做同源策略它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

那么什么叫做同源策略呢？

同源策略是指在Web浏览器中，允许某个网页脚本访问另一个网页的数据，但前提是这两个网页必须有相同的URI、主机名和端口号，一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。此策略可防止某个网页上的恶意脚本通过该页面的文档对象模型访问另一网页上的敏感数据。

原文链接：https://blog.csdn.net/qq_41880073/article/details/123032642

在这里插入图片描述

三、前端解决跨域方法

在vue.config.js中添加代码

vue.config.js代码如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
   proxy: {
        '/api': { //请求路径关键字
         	target: 'http://localhost:8083', //对应自己的接口
           changeOrigin: true,  //是否允许跨域,在本地会创建一个虚拟服务端，然后发送请求的数据，
            pathRewrite: {
                '^/api': ''     //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接                                     口时直接用api代替
  // 比如我要调用'http://localhost:8024/management/user/add'，直接写‘/api/user/add’即可
            }
        }
    }
}, 


})

注意：修改完vue.config.js中的代码后，重新运行vue

在这里插入图片描述