使用vue-cli脚手架搭建项目解决前端跨域问题

一、什么是跨域?

引入同源对概念,是因为我们常指对跨域,其实就是浏览器同源策略限制的一类请求场景。同源 符合”协议+域名+端口”三者相同,就是同源

二、vue-cli搭建的项目如何解决跨域问题

1.安装 http-proxy-middleware 插件

$ npm install --save-dev http-proxy-middleware(在idea终端运行该命令行)

2.配置dev.evn.js文件

使用vue-cli脚手架搭建项目解决前端跨域问题

 

3.配置api/index.js文件

使用vue-cli脚手架搭建项目解决前端跨域问题

4.补充:如果使用vue-element-admin搭建的项目,需要配置调用接口文件【eg:login.js】

使用vue-cli脚手架搭建项目解决前端跨域问题

注意:如果框架里有示例接口数据则需要关掉,否则接口地址会直接请求本地的例子数据,该关口在views/main.js里

使用vue-cli脚手架搭建项目解决前端跨域问题