Nginx 跨域代理
安装环境:
win10
nginx-1.17.2
安装:
在写前端调用后台接口时,报了跨域的错误。
调试地址:http://localhost:5500/demo/encAjax.html
接口地址:http://10.19.151.196:8070/A/B/C?ID=0
利用nginx配置跨域的原理是,将调试地址和接口地址映射成同源地址即可。
上述两个地址经代理后变成:http://localhost:8088/demo/encAjax.html访问http://localhost:8088/apis/A/B/C?ID=0(其中apis节点为设置的标识,后面介绍)
步骤:
一、打开nginx.conf
路径:\nginx-1.17.2\conf\nginx.conf
二、编辑
这里为nginx配置监听端口为8088(因为本机端口占用的问题需要改一下)
此时,在浏览器中输入http://localhost:8088,看到的是nginx的欢迎页面
三、跨域代理设置
修改nginx.conf文件,加上跨域头,代理调试地址,接口地址。
这里为接口地址上加上apis标识,目的是方便读取并过滤有/apis/节点的地址
改完后,保存并启动
四、验证
浏览器输入以下地址进行验证
http://localhost:8088/demo/encAjax.html
http://localhost:8088/apis/A/B/C?ID=0
如果成功的话,下面两个网站内容应该一样。
http://localhost:8088/demo/encAjax.html与http://localhost:5500/demo/encAjax.html
http://localhost:8088/apis/A/B/C?ID=0与http://10.19.151.196:8070/A/B/C?ID=0
五、记录
在百度过程中,发现设置proxy_pass时,有讲究,记录一下(这里参考了:https://www.jb51.net/article/167402.htm)
Nginx将proxy_pass分为两种类型:
(1)一种是只包含IP和端口号的(连端口之后的/也没有,这里要特别注意),比如proxy_pass http://localhost:8080,这种方式称为不带URI方式;
(2)另一种是在端口号之后有其他路径的,包含了只有单个/的,如proxy_pass http://localhost:8080/,以及其他路径,比如proxy_pass http://localhost:8080/abc。
Nginx 跨域代理的更多相关文章
- eclipse加速/Nginx配置跨域代理
下班时间到啦! --下班都是他们的,而我,还是什么都没有. eclipse加速 去掉包含js文件的包的js验证,否则每次启动都需要进行校验(右击项目->properties) Nginx配置跨域 ...
- nginx跨域设置
nginx跨域问题例子:访问http://10.0.0.10/ 需要能实现跨域 操作:http://10.0.0.10/项目是部署在tomcat里面,tomcat跨域暂时还不会,按照网上的方法操作也没 ...
- Nginx跨域及Https配置
一.跨域 1. 什么是跨域? 跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制(指一个域下的文档或脚本试图去请求另一个域下的资源,这 ...
- Nginx跨域了解及模拟和解决
Nginx跨域 同源策略 何为同源: 1.协议(http/https)相同 2.域名(IP)相同 3.端口相同 详解请看我另一篇文章 https://www.cnblogs.com/you-men/p ...
- vue-cli 前端开发,后台接口跨域代理调试问题
使用 webpack的方式开发的时候,前台开发过程中需要调用很多后台的数据接口,但是通常前后台分离的开发方式,后台的接口数据很可能是不方便或者是不能在前端同学的电脑上运行的,也就出现了所谓的跨域问题. ...
- nodejs之mock与跨域代理的三两事
emmm...好久没写博客了,都忘了该怎么开始. 那就先说下mockjs.因为一些原因,导致后台接口没有数据,那么我们就开始自己造数据,使用的是比较流行mockjs,根据文档就能简单的配置,然后开始愉 ...
- nginx跨域的简单应用
nginx跨域的简单应用 要求:1.浏览器访问print.qianbaihe.wang/zt 直接调转至 www.flybirdprint.com/zt,浏览器显示域名不变. server { lis ...
- nginx跨域解决方案
nginx跨域解决方案Access to Font at 'http://47.104.86.187/yinjiatoupiao2/iconfont/iconfont.woff' from origi ...
- axios FastMock 跨域 代理
发送请求: 实现:发送请求,获取数据. 原本想自己写服务,后来无意间找到FastMock这个东东,于是就有了下文... 首先我安装了axios,在fastmock注册好了并创建了一个接口,怎么搞自行百 ...
随机推荐
- 一个html,3D 标签 鼓励自己
效果如图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- python小例子(一)
参考链接:https://zhuanlan.zhihu.com/p/83998758?utm_source=qq&utm_medium=social&utm_oi=7282008528 ...
- python实现输入任意一个大写字母生成金字塔的示例
输入任意一个大写字母,生成金字塔图形 def GoldTa(input): L = [chr(i) for i in range(65, 91)] # 大写字母A--Z idA = 65 # 从A开始 ...
- Asp.Net Core中配置使用Kindeditor富文本编辑器实现图片上传和截图上传及文件管理和上传(开源代码.net core3.0)
KindEditor使用JavaScript编写,可以无缝的于Java..NET.PHP.ASP等程序接合. KindEditor非常适合在CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使 ...
- C和C++中的引用传递
两种引用传递的定义方式 第一种 #include<stdio.h> void changeValue(int *a); int main(){ int a =1; changeValue( ...
- Docker应用部署
MySQL: #拉取mysql镜像 docker pull centos/mysql--centos7 #创建容器 #-p 端口映射 -e添加环境变量MYSQL_ROOT_PASSWORD 是root ...
- 前端技术之:如何在Vue中使用clipboard.js复制服务端数据
第一步 创建点击对象页面元素,并绑定业务数据. <el-button type="text" size="mini" class="copy-b ...
- 干货 Elasticsearch 知识点整理二
目录 root object mate-field 元数据字段 mapping-parameters 动态mapping(dynamic mapping) 核心的数据类型 精确匹配与全文检索 精确匹配 ...
- 使用Typescript重构axios(四)——实现基础功能:处理post请求参数
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 如何编译安装Linux内核
操作系统环境 VMware workstation15 Pro ubuntu18.04 LTS 待编译内核5.3.10版本 内核下载地址 kernel.org 环境配置 在正式编译前需要安装部分软件. ...