前端利用nginx代理解决跨域_nginx 用localhost代理远程域名-程序员宅基地

技术标签: nginx  前端  http  网络请求  

前端怎么配置nginx解决跨域

下载nginx

https://nginx.org/en/download.html

根据自己电脑下载stable version稳定版本的nginx,然后解压

nginx -t  //  检查是否有语法错误
nginx     //  启动nginx,默认是80端口,或者双击nginx.exe也是一样的
前端怎么利用nginx解决开发环境下的跨域

前端项目跑在:http://localhost:8080

    axios.get("/api/testCors").then((res) => {
      console.log(res);
    });

提供资源的服务器:http://localhost:9000

const http = require("http");
const app = http.createServer((req, res) => {
  if (req.url === "/api/testCors") {
    res.end("i just wanna be cool");
  }
});

app.listen(9000, "localhost", () => {
  console.log("localhost:9000开启服务");
});

直接在项目中请求肯定会跨域

修改nginx配置:

nginx.cong文件

server {
    listen       8090;
    server_name  localhost;

    location / {
        proxy_pass http://localhost:8080;
    }

    location /api {
        proxy_pass http://localhost:9000;
    }
}

修改之后,记得重启nginx

nginx开启了一个服务,跑在了http://localhost:9000

通过访问这个地址,就可以访问正确的页面了

它是怎么解决跨域的呢?

通过访问http://localhost:8090,将 “/” 路径代理到了 http://localhost:8080,我们就可以看到前端页面了 ;调用接口 “/api/testCors” 自动拼接了 “http://localhost:9000”,与浏览器url地址一致并没有跨域,不会报跨域的错误,只不过“http://localhost:8090/api/testCors”是找不到这个资源的,我们通过代理将他代理到了“http://localhost:9000/api/testCors”,就能请求到资源了,这是服务器请求服务器,自然也没有跨域问题

​ -----------------------------------------

​ | 请求路径为/,代理到8080端口

​ | /

请求 -> | 8090

​ | \

​ | 请求路径为/api,代理到9000端口

​ ---------------------------------------

localhost:8090/index.html,代理到localhost:8080/index.html

localhost:8090/api/testCors,代理到localhost:9000/api/login

nginx的主要作用

负载均衡

反向代理

正向代理

正向代理客户端,反向代理服务器

动静分离

将静态资源如css,js,图片,动图等放入Nginx,让Nginx渲染资源

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_50576800/article/details/125174902

智能推荐

Java虚拟机加载Java类的过程_java虚拟机加载.java文件-程序员宅基地

文章浏览阅读1.8w次。JVM加载Java类的过程JVM加载Java类的过程可分为三步:加载、链接、初始化。1、加载加载的过程就是查找字节流,并根据找到的字节流来创建类的一个过程。Java语言的数据类型可以分为两大类:基本数据类型和引用数据类型。基本数据类型:由JVM预先定义好的,所以也就没有查找字节流这一说法引用数据类型:可分为四种,即类、接口、数组和泛型参数。因为泛型参数在编译过程中会被擦除,所以JVM中就只有前三种。而数组又是由JVM直接生成的,所以只有类和接口需要查找字节流那么JVM是怎么查找到字节流的_java虚拟机加载.java文件

C/C++ _strlwr_s 函数 – 字符串大写转小写- C语言零基础入门教程_c++ _strlwr(s);-程序员宅基地

文章浏览阅读2.4k次。目录一._strlwr_s 函数简介二._strlwr_s 函数实战三.猜你喜欢零基础 C/C++ 学习路线推荐 : C/C++ 学习目录 >> C 语言基础入门零基础 C/C++ 学习路线推荐 : C/C++ 学习目录 >> C++ 面向对象零基础 C/C++ 学习路线推荐 : C/C++ 学习目录 >> C++ 设计模式零基础 C/C++ 学习路线推荐 : C/C++ 学习目录 >> C++ STL零基础 C/C++ 学习路线推荐 :_c++ _strlwr(s);

报错解决——RuntimeError: The size of tensor a (4) must match the size of tensor b (3) at non-singleton-程序员宅基地

文章浏览阅读7.0k次,点赞17次,收藏12次。RuntimeError: The size of tensor a (4) must match the size of tensor b (3) at non-singleton dimension 0_runtimeerror: the size of tensor a (4) must match the size of tensor b (3) a

vim常用快捷键笔记-程序员宅基地

文章浏览阅读142次。模式切换Vim一共有4个模式:正常模式 (Normal-mode) :正常模式一般用于浏览文件,也包括一些复制、粘贴、删除等操作插入模式 (Insert-mode):在正常模式中按下i, I, a, A等键命令模式 (Command-mode):在正常模式中,按下:(冒号)键,会进入命令模式可视模式 (Visual-mode):在正常模式按下v, V, \<Ctrl&g..._直接在normal模式下

python中利用递归方法实现n的阶乘计算_python递归函数求n的阶乘-程序员宅基地

文章浏览阅读2.1w次,点赞4次,收藏4次。给出一个数n,写一个函数myfac(n)来计算n!(n的阶乘)def myfac(n): if n==1: return 1 else: return myfac(n-1)*n_python递归函数求n的阶乘

使用 RK3399 搭载 Android 系统7.1.2,出现 AudioTrack 有时无法播放 PCM 音频_rk3399 rt5651底层播放busy-程序员宅基地

文章浏览阅读1.8k次。RK3399 在 Android 系统 7.1.2,出现 AudioTrack 有时无法播放 PCM 音频的问题问题背景:切换 rk3399 后,搭载系统为 Android 7.1.2,如果单独使用 audiotrack 播放 PCM 音频是没有问题,但是应用在智能家居上,一般都需要和语音识别打交道,在开启录音后,很大的几率出现播放 PCM 音频不出声,查看log日志发现在录音短暂关闭后能恢复..._rk3399 rt5651底层播放busy

随便推点

Stream流中的常用方法_count_stream流统计数量-程序员宅基地

文章浏览阅读962次。统计个数:count正如旧集合Collection 当中的size 方法一样,流提供count 方法来数一数其中的元素个数:long count();该方法返回一个long值代表元素个数(不再像旧集合那样是int值)。基本使用:package com.learn.demo02.Stream;import java.util.ArrayList;import java.ut..._stream流统计数量

NYOJ 228 士兵杀敌(五) (巧用数组)-程序员宅基地

文章浏览阅读241次。题目228题目信息运行结果本题排行讨论区士兵杀敌(五)时间限制:2000 ms | 内存限制:65535 KB难度:5描述南将军麾下有百万精兵,现已知共有M个士兵,编号为0~M,每次有任务的时候,总会有一批编号连在一起人请战(编号相近的人经常在一块,相互之间比较熟悉),最终他们获得的军功,也将会平分到每

如何用Python中的3D绘图命令,让你的数据更高级_python addplot()画3维图像-程序员宅基地

文章浏览阅读1.1k次,点赞5次,收藏15次。图是最直观观察到数据之间的内部关系以及规律的,比如在下面的几张动图中,使用matplotlib中的三维显示命令,使得我们可以对于logistic回归网络的性能与相关参数有了更好的理解。下面的动图显示了在训练网络时,不同的学习速率对于算法收敛之间的影响。下面给出了绘制这些动态曲线的相关的python指令:➤01 3D plot1.基本语法在安装matplotlib之后,自动安装有 mpl_toolkits.mplot3d。#Importing Librariesimport matplo_python addplot()画3维图像

selenium+python自动化- 浏览器窗口切换 switch_to_window_python selenium switch_to_window-程序员宅基地

文章浏览阅读8.2k次,点赞4次,收藏15次。如果把下面几行代码注释掉,我们会发现运行报错位置在“输入用户名”, 这是因为,第二步点击“登陆”时,浏览器又弹出了一个新的窗口,程序每次都会去第一个窗口中寻找元素,而“输入用户名”在弹出的第二个窗口标签里,所以是找不到的。#latest_window=driver.window_handles[-1]#driver.close() 关闭窗口,保证浏览器只有一个窗口#driver.swit..._python selenium switch_to_window

32岁的程序员转职成为大学讲师,收入曝光_大学计算机讲师工资-程序员宅基地

文章浏览阅读4.3k次。对于很多在互联网公司工作的程序员来说,其实他们到了一定岁数也是对自己的前途比较担忧,因为他们担心被公司劝退,而且往往互联网公司在裁员的时候可以说是非常无情的,即便是在公司工作很长时间立下汗马功劳,都不会被相关领导所重视,那么这些程序员便会在35岁之前做好打算。近日在论坛,笔者看到有位32岁的程序员便转职成为了一名大学讲师,其实在此之前他的学历还是蛮高的,985博士毕业,毕业以后一直在互联网公司..._大学计算机讲师工资

网页防篡改技术追踪-程序员宅基地

文章浏览阅读894次。网站在信息发展中起到了重要的作用,已经渗透到了各个角落,根据CNNIC调查报告显示,截至2006年1月,我国的上网用户总数高达1.1亿,国内网站数量达67万,庞大的网民数量和网站群为互联网应用的快速发展奠定了良好的基础。网页的地位也得到了空前的提高,对一个企业对一个政府机构网页无异于自己的门面。虽然目前已有防火墙、入侵检测等安全防范手段,但各类web应用系统的复杂性和多样性导致系统

推荐文章

热门文章

相关标签