Vue项目中如何解决跨域呢？

约定不等于承诺〃 2022-09-12 05:54 138阅读 0赞

## 一、跨域是什么？ ##

跨域本质是浏览器基于**同源策略**的一种安全手段

同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能

所谓同源（即指在同一个域）具有以下三个相同点

*  主机相同
 *  端口相同
 *  协议相同

反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域

## 二、如何解决？  ##

*  JSONP
 *  CORS
 *  Proxy

我的接触的就是Proxy（代理） ，我来介绍一下！

代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，防止攻击

如果是通过`vue-cli`脚手架工具搭建项目，我们可以通过`webpack`为我们起一个本地服务器作为请求的代理对象

通过该服务器转发请求至目标服务器，得到结果再转发给前端，但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域

amodule.exports = {
        devServer: {
            host: '127.0.0.1',
            port: 8084,
            open: true,// vue项目启动时自动打开浏览器
            proxy: {
                '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
                    target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
                    changeOrigin: true, //是否跨域
                    pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                        '^/api': "" 
                    }
                }
            }
        }
    }

请求的时候，根目录换成api/就行