在Vue中解决跨域问题的方法之一---数据代理（开发环境中）

最新推荐文章于 2024-08-12 13:22:54 发布

？岁月神偷

最新推荐文章于 2024-08-12 13:22:54 发布

阅读量661

点赞数

文章标签： javascript vue.js 前端框架

本文链接：https://blog.csdn.net/weixin_46116512/article/details/121650816

版权

本文介绍了跨域产生的原因，主要是浏览器的同源策略限制。详细讲解了跨域代理的配置步骤，包括修改后台基地址为本地，并在`vue.config.js`中设置`devServer`的代理配置，以解决开发阶段的跨域问题。同时，文章探讨了跨域代理的原理，即通过数据代理绕过浏览器的同源策略限制。

摘要由CSDN通过智能技术生成

原因：

1-----因为浏览器的同源策略的影响，协议，端口，Ip(域名)要一致,才可以实现请求，
2------跨域出现的原因：假设vsode终端（8080）通过（浏览器）浏览器先带着前台的请求地址去向后台请求，如果后台响应的地址不一致，就会造成跨域，（页面的数据向后台请求）
3------以后工作，后台的小伙伴给你的接口，一些可以，一些跨域，就要解决跨域

原理：个人理解

数据代理是服务器向服务器发送请求
浏览器是一定会接收请求和响应的，既然由浏览器向后台服务器会造成跨域，那就直接由终端（vscode）直接向后台发送服务,并且响应后台服务器，然后浏览器都要请求和响应的时候，也直接由终端一个人去完成，这样就可以保证同源，也可以骗过浏览器（直接向后台请求服务的行为）

1.因为浏览器的同源策略的影响，协议，端口，Ip(域名)要一致,才可以实现请求，

实现：跨域代理配置

分两步走

第一步：改（后台）基地址为本地：

1.第一步改基地址：http://localhost:8080/api （api是与后端约定的）,接口基地址有后端提供，我们做代理数据，先把它基地址改了

优化：上面基地址是绝对路径，改为相对路径比较好，这样你的端口如果被占用了，也不用自己去检查出错，相对路径会自动帮你拼接（基地址: /api）

第二步：教会终端（vscode）认识服务器

vue.config.js (是一个可选的配置文件，脚手架配置文件),配置写在vue.config.js文件夹下,devServer对象里面

module.exports = {
    devServer: {
    proxy: {
      '/api': {
        // 不拼/api后面路径，是因为前面已经匹配了，是/api就开始代理，解决跨域,api是与后端约定的
      
        target: 'http://localhost:3000', //后端服务器地址，这里我是开了本地服务器，所以是localhost
        changeOrigin: true  //  //changeOrigin:开启代理
      }
    }

  }
}

这是个人小知识总结，各位大佬图个乐就行