前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言
最近做的一个项目中使用了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服务器以相同的参数向真正的服务器进行请求,再把响应返回给前台。
禁止跨域是浏览器的安全策略限制
这里有两个误区
- ✕ 动态请求就会有跨域的问题
✔ 跨域只存在于浏览器端,不存在于安卓/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)的更多相关文章
- vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...
- 解决React前端在开发环境的跨域问题
在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用Nginx来处理,那么,在本地开发环境又该如何处理呢? React框架里处理跨域问题,可以使用ht ...
- 用 Nokitjs 解决前端开发中的跨域问题
问题 在开发一些「单页应用」时,通常会使用 Ajax 和服务器通讯,比如 RESTful API,通常「前端」和「服务端 API」可能是有不同人员在负责,也不在同一个工程下,那么开发过程中就可能会遇到 ...
- 关于vue项目中axios跨域的解决方法(开发环境)
1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...
- web项目中的跨域问题解决方法
一种是JSONP 一种是 CORS. 在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持. JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多 ...
- 详解Vue 开发模式下跨域问题
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...
- (转)HTML5开发中Access-Control-Allow-Origin跨域问题
今天准备通过JavaScript的方式调用问说问答的内容,由于使用的不同的二级域名,遇到了一个跨域问题,虽然可以使用JSON或者XML来解决这个问题,但是我们可以通过Access-Control-Al ...
- 【原创】Vue.js 中 axios 跨域访问错误
1.假如访问的接口地址为 http://www.test.com/apis/index.php (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起 ...
- web开发中浏览器跨域问题
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...
随机推荐
- urllib基本用法(了解)
一.urllib.urlopen 1.urlopen from urllib import request r = request.urlopen('http://www.baidu.com/') # ...
- git 控制版本
git:版本控制工具 1.进入想要进行版本控制项目的文件夹内 2.右击->Git Bash Here 3.初始化 git init 会多出一个.git隐藏文件夹 4.查看文件状体 git sta ...
- kuangbin专题专题十一 网络流 Dining POJ - 3281
题目链接:https://vjudge.net/problem/POJ-3281 题目:有不同种类的食物和饮料,每种只有1个库存,有N头牛,每头牛喜欢某些食物和某些饮料,但是一头牛 只能吃一种食物和喝 ...
- java重点知识点整理
隔壁班的帅哥给我的 1.1简述JAVA的语言特点 a语法简单,功能强大 b分布式与安全性 c与平台无关 d多线程 1.2什么是Java虚拟机?它包括哪几个部分? 解: Java 虚拟机 (JVM ) ...
- 数据结构 二维数组-->稀疏数组-->二维数组
稀疏数组基本概念: 稀疏数组应用场景: 当一个数组大部分的元素为"0",或者为同一个值的数组时,可以使用稀疏数组来保存该数组 处理方法: 1>记录数组一共有几行几列,有多少不 ...
- python下的selenium和chrome driver的安装
selenium是一款支持多种语言.多种浏览器.多个平台的开源web自动化测试软件,测试人员可用python.java等语言编写自动化脚本,使得浏览器可以完全按照你的指令运行,大大节省了测试人员用鼠标 ...
- Centos 7 部署lnmp集群架构
前言介绍 lnmp的全程是 linux + nginx + mysql + php; lnmp就是上述系统及应用程序的简写组合: lnmp其实已经代表了一个用户正常对一个页面请求的流程,nginx接收 ...
- 【Nginx入门系列】第二章 外部无法访问Nginx服务器
问题 Nginx服务器已经搭建成功,并且已经启动(如下图所示),并且可以ping通nginx服务器的ip地址,但是外部机子无法访问 Nginx服务器(没法显示欢迎页面) 解决方案 一般这种情况是出现在 ...
- 浅析YYCache
一.前言 读优秀的源码,对自己的提升还是很快的,无论是考虑问题的角度,还是编码能力. 带着问题读源码的,学习效率更高,可以暂时先定几个小问题,带着问题,去思考为什么作者这样弄,是否有替换方案? 1). ...
- 关于C语言数组的小练习--笔记
#include <stdio.h> #include <windows.h> #include <mmsystem.h> #include <string. ...