VUE部署nginx解决跨域问题
VUE部署nginx解决跨域问题
- Vue的代理跨域问题,需要确定的是在开发阶段可以使用,部署到服务器后出现请求失败的问题(404),如下图。
- VUE配置的代理
Vue的代理跨域问题,需要确定的是在开发阶段可以使用,部署到服务器后出现请求失败的问题(404),如下图。
这是因为VUE在打包的过程中并没有把代理配置也进行打包,需要配置跨域代理,这里我使用的是服务器是nginx代理实现跨域问题。
先去百度上下载一个nginx,然后进入conf目录,打开nginx.txt配置文件,
找到如下配置
VUE配置的代理
devServer: {proxy: {'/request': { //以request后缀请求target: '地址:端口', //转发地址ws: true,pathRewrite:{'^/request':'/'}, //把request 替换成/changeOrigin: true}}}
转换到对应的服务器的配置跨域如下
server {listen 80;server_name localhost;#匹配请求头为 request,把request 换成/ 然后提交proxy_pass http这个指定地址location ^~/request/ {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Credentials true;proxy_set_header X-NginX-Proxy true; rewrite ^(.*)request(.*)$ $1/$2; break;#root html/dist;proxy_pass http:这里是你的后台地址:端口号;index index.html index.htm;}#匹配以/的请求 然后跳转到指定目录,location / {#我这里是指定的是nginx的html目录下的项目root html/dist;index index.html index.htm;}error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}
以上配置就可以解决跨域代理问题
VUE部署nginx解决跨域问题相关推荐
- vue反向代理解决跨域及部署nginx端口转发解决跨域
1. 前言 本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域,因为踩了不少的坑,百度了很多,也试了太多的方法,最终得以解决,所以记录一下,希望遇到同样问题的友友们可以高效的解 ...
- 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
- 前端如何使用proxyTable和nginx解决跨域问题
前端如何使用proxyTable和nginx解决跨域问题 参考文章: (1)前端如何使用proxyTable和nginx解决跨域问题 (2)https://www.cnblogs.com/webhmy ...
- 使用nginx解决跨域问题
1.跨域解释 1.1 怎么知道我遇到了跨域问题 如果项目没做前后端分离,是不会有跨域问题的.前后端分离的项目中,前端调用后台服务时,报错 No 'Access-Control-Allow-Origin ...
- Vue + Nodejs + Express 解决跨域的问题
Vue + Nodejs + Express 解决跨域的问题 首先检测你的Vue的版本号 此文章针对3.0版本解决跨域问题 $ vue -V 2.X or 3.X 直接访问如下 created() { ...
- Nginx 解决跨域问题
什么是跨域 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域 nginx解决跨域请求 nginx.config配置 server {listen 80;server_na ...
- 如何用nginx解决跨域问题
先来说一下什么是同源策略 同源(域名.协议.端口相同)策略是一种约定,是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,浏览器的正常功能将受到影响. 什么是跨域? 跨域就是跨域名,跨端口,跨协议 ...
- No ‘Access-Control-Allow-Origin‘ header is present on the requested resource Vue配置代理解决跨域问题
前言 在进行web开发进行数据请求的时候常常会遇到跨域问题导致无法请求数据. 如果采用如下方法向http://localhost:4000服务器发送getStudents进行接口数据请求,在后端没有处 ...
- nginx解决跨域问题
在我们前端开发的过程中, 相信大家都遇到过一个让人头疼的问题,那就是跨域问题. 跨域解决的方式有很多,这里主要讲的是如何来使用 nginx来解决我们所遇到的跨域问题 首先,在我们开始之前,首先要知道跨 ...
最新文章
- HEW MAP文件使用
- 音视频技术开发周刊 | 132(FFmpeg决策委员会委员 刘歧)
- Notepad++中用正则表达式匹配中文
- 立足优势,你的网站会更精彩
- oracle运维平台开发,Oracle数据库运维
- PyTorch 1.6 发布:原生支持自动混合精度训练并进入稳定阶段
- 爆赞!java生成文件
- VC中海量文件读写类设计与应用
- 前端开发 AMD 和 CMD 的规范区别
- VSS2005源代码管理
- Android蓝湖图片格式,蓝湖「自动切图」新增 JPG、PDF、WebP 格式
- openflow 1.0中交换机对OFPT_QUEUE_GET_CONFIG_REQUEST消息的响应
- html 文字段后间距怎么设置,p字间距 html段落内文字设置字间距间隔
- Windows10系统重装后必不可少的优化步骤
- 怎么讲计算机e盘设置共享,共享盘怎么设置(电脑如何设置共享盘)
- 测试职业规划之知识点总结
- 用计算机算术表白,数学学霸的表白,你能看懂几句?
- 奋斗吧,程序员——第三十章 多情自古伤离别,更哪堪冷落清秋节
- 手眼标定,眼在手中,眼在手外
- dependencies和devDependencies的区别
热门文章
- tgz 压缩文件如何解压
- 深度学习与自然语言处理教程(2) - GloVe及词向量的训练与评估(NLP通关指南·完结)
- 易语言 易语言取网页源码乱码
- 流利阅读12.19 Victoria’s Secret gets ready for a makeover
- linux内核下获取系统时间,linux内核获取当前系统时间
- decode函数用法(oracle的decode函数用法)
- 谷歌浏览器修复_微软已经在Edge里解决谷歌浏览器让人讨厌的细节错误
- 打车小程序开发功能及解决方案
- html 获取class的值,js获取class的所有元素
- 高清免费免抠设计元素网站