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注册好了并创建了一个接口,怎么搞自行百 ...
随机推荐
- Azure DevOps 替换 appsettings 解决方案
之前发布了 <.Net Core DevOps -免费用Azure四步实现自动化发布(CI/CD)>之后,有很多朋友私信我说如何替换 appsettings 里面的 ConnectionS ...
- vue.js 使用 vue-router 修改页面标题
module.exports = { name: 'myComponent', data: {} route{ data: function(){ document.title = "页面标 ...
- day27作业
FTP需求 客户端可以注册登录 client:输入一个login sever:执行login 客户端登陆后可以选择文件夹上传与下载 client:输入一个upload,download sever:执 ...
- Golang的安装和编译
一.下载安装(Ubuntu16.04) 1.下载地址:https://golang.google.cn/dl/ 2.下载Linux版本的安装包go1.10.3.linux-amd64.tar.gz并复 ...
- day3,用户交互,input的应用
1.与用户交互 输入:input() python2.x版本 input后面家的东西要声明输入的类型 >>> input(">>:") ...
- 宋宝华:关于Ftrace的一个完整案例
本文系转载,著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者: 宋宝华 来源: 微信公众号linux阅码场(id: linuxdev) Ftrace简介 Ftrace是Lin ...
- 重磅!微软发布 Visual Studio Online:Web 版 VS Code + 云开发环境
北京时间 2019 年 11 月 4 日,在 Microsoft Ignite 2019 大会上,微软正式发布了 Visual Studio Online (VS Online)公开预览版! 如今发布 ...
- 安装实时查看日志工具 log.io
官网:http://logio.org/ 一.环境 [root@centos ~]# cat /etc/system-release CentOS release 6.5 (Final) [root@ ...
- js 面试题解析(一)
1.call和apply的区别. 当需要传的参数是一个数组时,使用apply更加方便;而使用call时需要将数组展开,将数组中的每一项单独传入. 当需要传入的参数大于3个时,call的性能要略优于ap ...
- CheckStyle,定制属于自己的Java编码规范
前言 如今,代码规范几乎是当下稍有追求的团队都要求做到的,但是对于Java编码规范,不同的公司或团队却有着不同的标准.尽管官方提供了一些标准,但是在基本规则的基础上,各大公司又有自己的规范,比如Sun ...