目录
http-proxy
后端nginx配置了反向代理
后端配置了cookie Path
首页 web前端 js教程 nodejs中http代理库http-proxy中常见的问题分析

nodejs中http代理库http-proxy中常见的问题分析

Aug 13, 2018 pm 05:37 PM
javascript node.js webpack 前端

本篇文章给大家带来的内容是关于nodejs中http代理库http-proxy中常见的问题分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

http-proxy

http-proxy是一个nodejs的http代理库,已经被webpack-dev-server集成进来,做代理使用。原因是在前后端分离大行其道的今天,我们如果需要在本地调后端api接口,不配置hostname的话,必然是一个跨域的请求。因为浏览器的跨域安全限制,调取是不通的,所以本地代理就成了一个本地开发环境的必选项。

'/saasapi/*': {
    target: 'http://ebk.17u.cn',
},
登录后复制

意思呢大概就是把saasapi开头的ajax请求重定向到http://ebk.17u.cn

本地开发没有问题,线上如果也是用nodejs的服务器,如果恰巧也配置了代理,部署到线上出现了意想不到的问题~

后端nginx配置了反向代理

一个网站主域名是17u.cn,后端如果部署了多个api服务,那这样子他的api服务可能是这样子

主域名 二级域名1 二级域名2 二级域名3
17u.cn ebk.17u.cn ebk2.17u.cn ebk3.17u.cn

前端同样部署了3个nodejs服务,也同样配置了3个代理。部署到线上却发现,请求总是指向第一个二级域名,其他的二级域名访问不到。

百思不得姐!

后来仔细查看http的信息,发现几个服务的ajax请求发到服务器上之后,hostname都是浏览器的域名,而nginx的反向代理配置都是根据hostname来做转发的。因为我们的hostname对于nginx来说都是陌生的,所以就默认转发到默认的第一个服务上去了。

查了http-proxy配置,哈哈,果然有这种修改的配置,只要稍微改一下就好了。

'/saasapi/*': {
    target: 'http://ebk.17u.cn',
    changeOrigin: true
},
登录后复制

changeOrigin: true意思就是把hostname改为和target一致就可以了。这样后端nginx就可以正常转发了。

后端配置了cookie Path

后端api,不仅仅配置了二级域名,还配置了二级目录,前端部署的服务也一样需要二级目录。

api地址就变成这个样子:

ebk.17u.cn/saasapi
登录后复制

前端地址:

trans.17u.cn/saas
登录后复制

代理配置做对应调整

'/saas/saasapi/*': {
    target: 'http://ebk.17u.cn',
    changeOrigin: true,
    rewrite: path => path.replace(/^\/saas\/saasapi\/cxy/, '/saasapi')
},
登录后复制

这样子看起来很正常吧,但是问题出在哪呢?后端把登录之后设置的cookie也设置了path:Path='/saasapi'

这样子问题就来了,trans.17u.cn/saas当前域名下读取不到/saasapi下面的cookie,导致前端登录每次都通过,但就是不能正常调api,每次调取都提示没有登录。

有问题还是先查文档。

还是发现了解决方案

cookiePathRewrite: { '/saasapi': '/saas/saasapi' }
登录后复制

重写cookie路径就好了,同理如果后端接口指定了cookie的domain,一样有方案解决

cookieDomainRewrite
登录后复制

还有一些其他rewrite,应该都比较好用的。

ps:在解决过程中,发现改了也总是不能成功,一度怀疑是库的bug。后来发现需要清除掉chrome的cookie。

直接点Application -> Cookie:删除下面的cookie是不行的。清理不掉全部的cookie,需要到Application -> clear storage中,clear site data才可以。最终成功

相关推荐:

Js中前端模块化的详细分析及其区别对比

jQuery中的方法有哪些?jQuery中常用的方法(附代码)

jQuery对象与原生DOM对象之间的区别及转换

以上是nodejs中http代理库http-proxy中常见的问题分析的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1664
14
CakePHP 教程
1421
52
Laravel 教程
1316
25
PHP教程
1266
29
C# 教程
1239
24
PHP与Vue:完美搭档的前端开发利器 PHP与Vue:完美搭档的前端开发利器 Mar 16, 2024 pm 12:09 PM

PHP与Vue:完美搭档的前端开发利器在当今互联网高速发展的时代,前端开发变得愈发重要。随着用户对网站和应用的体验要求越来越高,前端开发人员需要使用更加高效和灵活的工具来创建响应式和交互式的界面。PHP和Vue.js作为前端开发领域的两个重要技术,搭配起来可以称得上是完美的利器。本文将探讨PHP和Vue的结合,以及详细的代码示例,帮助读者更好地理解和应用这两

Django是前端还是后端?一探究竟! Django是前端还是后端?一探究竟! Jan 19, 2024 am 08:37 AM

Django是一个Python编写的web应用框架,它强调快速开发和干净方法。尽管Django是一个web框架,但是要回答Django是前端还是后端这个问题,需要深入理解前后端的概念。前端是指用户直接和交互的界面,后端是指服务器端的程序,他们通过HTTP协议进行数据的交互。在前端和后端分离的情况下,前后端程序可以独立开发,分别实现业务逻辑和交互效果,数据的交

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

Go语言前端技术探秘:前端开发新视野 Go语言前端技术探秘:前端开发新视野 Mar 28, 2024 pm 01:06 PM

Go语言作为一种快速、高效的编程语言,在后端开发领域广受欢迎。然而,很少有人将Go语言与前端开发联系起来。事实上,使用Go语言进行前端开发不仅可以提高效率,还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性,并提供具体的代码示例,帮助读者更好地了解这一领域。在传统的前端开发中,通常会使用JavaScript、HTML和CSS来构建用户界面

Django:前端和后端开发都能搞定的神奇框架! Django:前端和后端开发都能搞定的神奇框架! Jan 19, 2024 am 08:52 AM

Django:前端和后端开发都能搞定的神奇框架!Django是一个高效、可扩展的Web应用程序框架。它能够支持多种Web开发模式,包括MVC和MTV,可以轻松地开发出高质量的Web应用程序。Django不仅支持后端开发,还能够快速构建出前端的界面,通过模板语言,实现灵活的视图展示。Django把前端开发和后端开发融合成了一种无缝的整合,让开发人员不必专门学习

前端面试官常问的问题 前端面试官常问的问题 Mar 19, 2024 pm 02:24 PM

在前端开发面试中,常见问题涵盖广泛,包括HTML/CSS基础、JavaScript基础、框架和库、项目经验、算法和数据结构、性能优化、跨域请求、前端工程化、设计模式以及新技术和趋势。面试官的问题旨在评估候选人的技术技能、项目经验以及对行业趋势的理解。因此,应试者应充分准备这些方面,以展现自己的能力和专业知识。

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

Golang与前端技术结合:探讨Golang如何在前端领域发挥作用 Golang与前端技术结合:探讨Golang如何在前端领域发挥作用 Mar 19, 2024 pm 06:15 PM

Golang与前端技术结合:探讨Golang如何在前端领域发挥作用,需要具体代码示例随着互联网和移动应用的快速发展,前端技术也愈发重要。而在这个领域中,Golang作为一门强大的后端编程语言,也可以发挥重要作用。本文将探讨Golang如何与前端技术结合,以及通过具体的代码示例来展示其在前端领域的潜力。Golang在前端领域的作用作为一门高效、简洁且易于学习的

See all articles