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解决跨域问题相关推荐

  1. vue反向代理解决跨域及部署nginx端口转发解决跨域

    1. 前言 本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域,因为踩了不少的坑,百度了很多,也试了太多的方法,最终得以解决,所以记录一下,希望遇到同样问题的友友们可以高效的解 ...

  2. 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离

    近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...

  3. 前端如何使用proxyTable和nginx解决跨域问题

    前端如何使用proxyTable和nginx解决跨域问题 参考文章: (1)前端如何使用proxyTable和nginx解决跨域问题 (2)https://www.cnblogs.com/webhmy ...

  4. 使用nginx解决跨域问题

    1.跨域解释 1.1 怎么知道我遇到了跨域问题 如果项目没做前后端分离,是不会有跨域问题的.前后端分离的项目中,前端调用后台服务时,报错 No 'Access-Control-Allow-Origin ...

  5. Vue + Nodejs + Express 解决跨域的问题

    Vue + Nodejs + Express 解决跨域的问题 首先检测你的Vue的版本号 此文章针对3.0版本解决跨域问题 $ vue -V 2.X or 3.X 直接访问如下 created() { ...

  6. Nginx 解决跨域问题

    什么是跨域 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域 nginx解决跨域请求 nginx.config配置 server {listen 80;server_na ...

  7. 如何用nginx解决跨域问题

    先来说一下什么是同源策略 同源(域名.协议.端口相同)策略是一种约定,是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,浏览器的正常功能将受到影响. 什么是跨域? 跨域就是跨域名,跨端口,跨协议 ...

  8. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource Vue配置代理解决跨域问题

    前言 在进行web开发进行数据请求的时候常常会遇到跨域问题导致无法请求数据. 如果采用如下方法向http://localhost:4000服务器发送getStudents进行接口数据请求,在后端没有处 ...

  9. nginx解决跨域问题

    在我们前端开发的过程中, 相信大家都遇到过一个让人头疼的问题,那就是跨域问题. 跨域解决的方式有很多,这里主要讲的是如何来使用 nginx来解决我们所遇到的跨域问题 首先,在我们开始之前,首先要知道跨 ...

最新文章

  1. 高斯消元法对矩阵LU分解的影响
  2. python基础一循环
  3. java中类与对象回顾总结
  4. 算盘与电子计算机的区别之一是,算盘与电子计算机的区别之一是算盘没有存储能力...
  5. Mongodb的集合插入一个字段
  6. oracle日志文件打开,oracle日志文件和控制文件损坏的恢复
  7. NVIDIA DLI 深度学习培训 | 北京站年后即将开班
  8. 解决python 提示 SyntaxError: Missing parentheses in call to 'print'
  9. MySQL查询优化--细节理论
  10. Linux LAMP架构搭建
  11. 网站采集工具免费采集发布网站后台
  12. 软件设计师教程笔记整理
  13. HEX BIN互相转换
  14. linux下dns解析出错该如何配置
  15. 51CTO学院 oracle相关视频地址
  16. loadrunner 操作mysql_loadrunner学习笔记(从MYSQL中取数据)
  17. C语言之栈实现(详细)
  18. 全网最全的网络安全技术栈内容梳理(持续更新中)
  19. 2021最新! Springboot 2.X集成ElasticSearch 7.6.2(入门版)
  20. 两种经过验证的设计相结合:带有低温探针台的 8425 型直流霍尔系统

热门文章

  1. Android ap goToSleep
  2. RxJava之map方法使用
  3. 锁表:MyISAM非聚集索引和InnoDB聚集索引的各种锁表问题
  4. 按月、日统计查询数据SQL、以及case when的使用 -- postgresql、MySQL
  5. 一款拯救数据分析师的软件—IBM SPSS Statistics
  6. 平价运动耳机哪个牌子好、平价蓝牙运动耳机推荐
  7. Python编程作业【第一周】(一)
  8. jquery 数组去重
  9. 彪悍的代码不需要解释_巨魔神大人带领大家走向胜利_:P
  10. 简单介绍apache网页优化