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"替换为空。
如果你对vue全栈开发感兴趣,可以学习本套课程哦,快速入门 vue+node全栈开发。
点击学习Vue全家桶+Node+Express+MySQL全栈必修课
本篇文章关键词 : vue-cli 、proxy代理 、全栈入门必修课 、全栈 。