前言

最近做的一个项目中使用了vue+springboot的前后端分离模式

在前端开发的的时候,使用vue cli3的devServer来解决跨域问题

上线部署则是用的nginx反向代理至后台服务所开的端口

正文

开发环境中的跨域

首先,要确定后台服务的ip与端口

这里我的后台开的是

localhost:8081

npm run serve在8080端口

一般我们使用ajax请求的时候,会可以把url ip:port/api 写在ajax请求的url参数中

this.axios.get("localhost:8081"+ `/bpi/api/DayTradeinfoMarketStatusSearch?ddate=${day}`)

这样,这个请求就是从localhost:8080发向localhost:8081,端口不同这就遇到了跨域的问题

vue cli WebpackDevServer 解决跨域的方法是通过node开一个服务器进行代理。

前台发向后台服务器的请求,先发向node所开的服务,node服务器以相同的参数向真正的服务器进行请求,再把响应返回给前台。

禁止跨域是浏览器的安全策略限制

这里有两个误区

  1. ✕ 动态请求就会有跨域的问题

    ✔ 跨域只存在于浏览器端,不存在于安卓/ios/Node.js/python/ java等其它环境

    2.✕ 跨域就是请求发不出去了

    ✔ 跨域请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了

    详情请看

    我知道的跨域与安全-李银成

在vue cli3中的配置

在package.json同级目录下新建vue.config.js文件

//vue.config.js
module.exports = {
devServer: {
proxy: {
'/bpi': { // 以'/bpi'开头的请求会被代理进行转发
target: 'http://localhost:8081', // 要发向的后台服务器地址 如果后台服务跑在后台开发人员的机器上,就写成 `http://ip:port` 如 `http:192.168.12.213:8081` ip为后台服务器的ip
changeOrigin: true
}
}
}
}

ajax请求的写法

this.axios.get(`/bpi/api/DayTradeinfoMarketStatusSearch?ddate=${day}`)       //相比上面的写法,这里吧ip和端口去掉了,这样所发的请求会自动补全为 `localhost:port/api`    (port是npm run serve所开的端口)

这样,如果打开浏览器调试工具的network会发现请求依然发向 localhost:8080而不是后台服务的端口8081

但是没得关系,node已经帮你向8081端口请求了数据~

上线的时候使用nginx进行部署

使用npm run build命令打包,得到dist文件夹里面的内容就是静态文件,使用任何一个服务器返回里面的index.html就能在浏览器看到页面。

要注意服务器映射的目录和vue build的时候的路径配置

即vue.comfig.js里的 publicPath配置项

//vue.config.js
module.exports = {
publicPath:'./', //可以理解成build出来的index.html从哪里找他引用的js、css等文件。默认是"/"从根目录寻找
devServer: {
hotOnly:true,
disableHostCheck:true,
proxy: {
'/bpi': {
target: 'http://localhost:8081',
// ws: true,
// port:8083
changeOrigin: true
}
}
},
}

publicPath配置为"./" 时:

<script src=js/chunk-vendors.9049ec28.js></script><script src=js/app.379ce736.js></script>

publicPath配置为"/" 时:

<script src=/js/chunk-vendors.9049ec28.js></script><script src=js/app.379ce736.js></script>

nginx的配置

把dist中的内容放到nginx安装目录下的html文件夹里(也可以在conf文件夹的nginx.conf中修改要映射的文件夹)

打开nginx.conf

#nginx.conf
#只贴了一些重要内容上来,其他的配置保持默认就好
http {
server {
listen 8082; //监听的端口
server_name localhost; location / { // 表示 以'/'开头的请求怎样处理
root html; //指定root文件夹为 上面提到的html文件夹
index index.html; //返回index.html
}
location /bpi{ // 表示 以'/bpi'开头的请求 怎样处理
proxy_pass http://localhost:8081; //以同样的蚕食向这个地址请求,并返回给客户端
} }
}

这样,我们访问localhost:8082的时候,就会把index.html文件返回

虽然network显示接口是发现8082的,但是会反向代理到8081,这样就从后台服务器拿到了数据~~~~

vue部署的时候还剩下一个问题

由于vue开发的是单页面应用(可以看到,一般情况下build出来的dist文件夹里面只有一个html文件)

虽然我们通过vue-router可以实现各种路由,但是在部署之后,页面一刷新就会碰到404错误

这是由于 如果刷新之前 的路由是localhost:8082/bookList/detail ,这样的话刷新之后向服务器请求的是root文件夹下的bookList文件夹下的detail,而不是根目录中的index.html了,这就需要做一点小处理

#error_page 404 /index.html; //404的时候就返回index.html

#nginx.conf
#只贴了一些重要内容上来,其他的配置保持默认就好
http {
server {
listen 8082; //监听的端口
server_name localhost; location / { // 表示 以'/'开头的请求怎样处理
root html; //指定root文件夹为 上面提到的html文件夹
index index.html; //返回index.html
}
location /bpi{ // 表示 以'/bpi'开头的请求 怎样处理
proxy_pass http://localhost:8081; //以同样的蚕食向这个地址请求,并返回给客户端
} error_page 404 /index.html; //404的时候就返回index.html
}
}

404的时候就返回index.html

这样进入到index.html后,vue-router再根据地址栏的地址,来决定渲染什么模板,如此一来任性的甲方再怎么刷新也不会报404啦~~

前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)的更多相关文章

  1. vue开发环境配置跨域,一步到位

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...

  2. 解决React前端在开发环境的跨域问题

    在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用Nginx来处理,那么,在本地开发环境又该如何处理呢? React框架里处理跨域问题,可以使用ht ...

  3. 用 Nokitjs 解决前端开发中的跨域问题

    问题 在开发一些「单页应用」时,通常会使用 Ajax 和服务器通讯,比如 RESTful API,通常「前端」和「服务端 API」可能是有不同人员在负责,也不在同一个工程下,那么开发过程中就可能会遇到 ...

  4. 关于vue项目中axios跨域的解决方法(开发环境)

    1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...

  5. web项目中的跨域问题解决方法

    一种是JSONP 一种是 CORS. 在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持. JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多 ...

  6. 详解Vue 开发模式下跨域问题

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...

  7. (转)HTML5开发中Access-Control-Allow-Origin跨域问题

    今天准备通过JavaScript的方式调用问说问答的内容,由于使用的不同的二级域名,遇到了一个跨域问题,虽然可以使用JSON或者XML来解决这个问题,但是我们可以通过Access-Control-Al ...

  8. 【原创】Vue.js 中 axios 跨域访问错误

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起 ...

  9. web开发中浏览器跨域问题

    <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...

随机推荐

  1. urllib基本用法(了解)

    一.urllib.urlopen 1.urlopen from urllib import request r = request.urlopen('http://www.baidu.com/') # ...

  2. git 控制版本

    git:版本控制工具 1.进入想要进行版本控制项目的文件夹内 2.右击->Git Bash Here 3.初始化 git init 会多出一个.git隐藏文件夹 4.查看文件状体 git sta ...

  3. kuangbin专题专题十一 网络流 Dining POJ - 3281

    题目链接:https://vjudge.net/problem/POJ-3281 题目:有不同种类的食物和饮料,每种只有1个库存,有N头牛,每头牛喜欢某些食物和某些饮料,但是一头牛 只能吃一种食物和喝 ...

  4. java重点知识点整理

    隔壁班的帅哥给我的 1.1简述JAVA的语言特点 a语法简单,功能强大 b分布式与安全性 c与平台无关 d多线程 1.2什么是Java虚拟机?它包括哪几个部分? 解: Java 虚拟机 (JVM ) ...

  5. 数据结构 二维数组-->稀疏数组-->二维数组

    稀疏数组基本概念: 稀疏数组应用场景: 当一个数组大部分的元素为"0",或者为同一个值的数组时,可以使用稀疏数组来保存该数组 处理方法: 1>记录数组一共有几行几列,有多少不 ...

  6. python下的selenium和chrome driver的安装

    selenium是一款支持多种语言.多种浏览器.多个平台的开源web自动化测试软件,测试人员可用python.java等语言编写自动化脚本,使得浏览器可以完全按照你的指令运行,大大节省了测试人员用鼠标 ...

  7. Centos 7 部署lnmp集群架构

    前言介绍 lnmp的全程是 linux + nginx + mysql + php; lnmp就是上述系统及应用程序的简写组合: lnmp其实已经代表了一个用户正常对一个页面请求的流程,nginx接收 ...

  8. 【Nginx入门系列】第二章 外部无法访问Nginx服务器

    问题 Nginx服务器已经搭建成功,并且已经启动(如下图所示),并且可以ping通nginx服务器的ip地址,但是外部机子无法访问 Nginx服务器(没法显示欢迎页面) 解决方案 一般这种情况是出现在 ...

  9. 浅析YYCache

    一.前言 读优秀的源码,对自己的提升还是很快的,无论是考虑问题的角度,还是编码能力. 带着问题读源码的,学习效率更高,可以暂时先定几个小问题,带着问题,去思考为什么作者这样弄,是否有替换方案? 1). ...

  10. 关于C语言数组的小练习--笔记

    #include <stdio.h> #include <windows.h> #include <mmsystem.h> #include <string. ...