vue项目跨域问题的解决：vue-cli 开启代理

vue-cli 开启代理

说明

一般来说，当我们采取前后端分离的模式进行项目开发的话，那么前端和服务端的项目基本上可以说是两个项目了。

在开发环境下，一般我们都会将vue项目运行在localhost:8080这个地址，而服务端项目，我们这里以express为例，默认情况下运行在localhost:3000这个地址，此时如果从vue项目访问服务端的项目就会发生跨域的问题。

产生跨域的原因

一般来说，跨域问题的产生是因为受到了同源策略的影响，那么什么是同源策略呢？

mdn中给出的定义为：“ 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。”

根据同源策略的规定，一般来说会把多个地址之间分为 同源 和 非同源。

一个地址中，包括 协议、 域名 、 端口 。而只有三者相同，才为同源。

例如：

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.html	失败	主机不同

非同源状态会导致什么结果？

如果两个端口之间处于非同源的状态，那么就会导致 CORS跨域 问题。

类似如下的错误：

简单点说，当客户端请求了数据，服务端接收并且响应之后，浏览器就会检测是否处于同源状态，如果是非同源，就会把内容拦截住。

vue cli 开启代理

如果使用vue-cli创建项目，那么可以直接通过vue-cli中的proxy进行代理的设置。

开启代理最简单的方式，可以在vue项目的根目录创建一个vue.config.js文件，然后设置如下的代码：

module.exports = {
    devServer: {
        open: true,
        host: "127.0.0.1",
        port: "8080",
      // 代理
        proxy: {
            "/api": {
                target: "http://127.0.0.1:3000",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }


        }
    }
}

在上面的代码中，proxy中相应的设置就是用来设置代理相关内容的代码。

"/api"的设置，可以检测请求地址，如果以"/api"开头，就会默认使用下面的代理。"target"用来设置代理请求的地址， "changeOrigin"用来设置开启代理，"pathRewrite"用来将地址当中的"/api"替换为空。