nginx解决浏览器跨域问题_前端通过Nginx反向代理解决跨域问题

在前面写的一篇文章SpringMVC解决跨域问题，我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题，解决方式主要有如下三种方式:

JSONP

CORS

WebSocket

可是这几种方式都是基于服务器配置的，即对于自己的网站是可以通过这几种方式解决的，可是现在遇到另一个需求(前面提到过，写扇贝插件，我们不能更改扇贝的服务器配置，也不能发短信叫他们给我配置一下)。

本文探讨了前端如何通过Nginx反向代理的方式解决跨域问题。

跨域

再次重申： 跨域是浏览器行为，不是服务器行为。

实际上，请求已经到达服务器了，只不过在回来的时候被浏览器限制了。就像Python他可以进行抓取数据一样，不经过浏览器而发起请求是可以得到数据，想到通过Nginx的反向代理来解决跨域问题。

代理

所谓代理就是在我们和真实的服务器之间有一台代理服务器，我们所有的请求都是通过它来进行转接的。

正向代理

正向代理就是我们访问不了Google，但是我在国外有一台vps，它可以访问Google，我访问它，叫它访问Google后，把数据传给我。

如图：

反向代理

大家都有过这样的经历，拨打10086客服电话，可能一个地区的10086客服有几个或者几十个，你永远都不需要关心在电话那头的是哪一个，叫什么，男的，还是女的，漂亮的还是帅气的，你都不关心，你关心的是你的问题能不能得到专业的解答，你只需要拨通了10086的总机号码，电话那头总会有人会回答你，只是有时慢有时快而已。那么这里的10086总机号码就是我们说的反向代理。客户不知道真正提供服务人的是谁。

反向代理隐藏了真实的服务端，当我们请求 www.baidu.com 的时候，就像拨打10086一样，背后可能有成千上万台服务器为我们服务，但具体是哪一台，你不知道，也不需要知道，你只需要知道反向代理服务器是谁就好了，www.baidu.com 就是我们的反向代理服务器，反向代理服务器会帮我们把请求转发到真实的服务器那里去。Nginx就是性能非常好的反向代理服务器，用来做负载均衡。

如图：

总结

正向代理隐藏了真实的客户端。

反向代理隐藏了真实的服务器。

Nginx 就是一个很好的反向代理服务器，当然apache也可以实现此功能。

windows下Apache配置参考这篇文章： Windows Apache服务器配置

Nginx

Nginx(发音同engine x)是一个 Web服务器，也可以用作反向代理，负载平衡器和 HTTP缓存。该软件由 Igor Sysoev 创建，并于2004年首次公开发布。同名公司成立于2011年，以提供支持。

我在Windows下实现Nginx负载均衡提到过Windows下Nginx命令使用。

Nginx 反向代理模块 proxy_pass

proxy_pass 后面跟着一个 URL，用来将请求反向代理到 URL 参数指定的服务器上。例如我们上面例子中的 proxy_pass https://api.shanbay.com，则将匹配的请求反向代理到 https://api.shanbay.com。

通过在配置文件中增加proxy_pass 你的服务器ip,例如这里的扇贝服务器地址，就可以完成反向代理。

server {

listen 80;

server_name localhost;

## 用户访问 localhost，则反向代理到https://api.shanbay.com

location / {

root html;

index index.html index.htm;

proxy_pass https://api.shanbay.com;

}

}

配置html以文件方式打开

一般的情况下，我们的HTML文件时放置在Nginx服务器上面的，即通过输入 http://localhost/index.html ，但是在前端进行调试的时候，我们可能是通过 使用 file:///E:/nginx/html/index.html 来打开HTML。服务器打开不是特别方便。

而我们之所以要部署在服务器上，是想要使用浏览器自带的CORS头来解决跨域问题，如果不想把HTML放置在Nginx中，而想通过本地打开的方式来调试HTML，可以通过自己添加Access-Control-Allow-Origin等http头，但是我们的AJAX请求一定要加上http://127.0.0.1/request，而不能直接是 /request，于是将nginx.conf作如下配置：

location / {

root html;

index index.html index.htm;

# 配置html以文件方式打开

if ($request_method = 'POST') {

add_header 'Access-Control-Allow-Origin' *;

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

}

if ($request_method = 'GET') {

add_header 'Access-Control-Allow-Origin' *;

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

}

# 代理到8080端口

proxy_pass http://127.0.0.1:8080;

}

处理DELETE和PUT跨域请求

而现在我的后台是restful风格的接口，采用了delete和put方法，而上面的配置就无能为力了。

可以通过增加对非简单请求的判断来解决DELETE和PUT跨域请求。

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求(preflight)。

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

因此，为了使Nginx可以处理delete等非简单请求，Nginx需要作出相应的改变，更改配置如下

location / {

# 完成浏览器的"预检"请求

if ($request_method = 'OPTIONS') {

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Credentials true;

add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

return 204;

}

# 配置html在本地打开

if ($request_method = 'POST') {

add_header 'Access-Control-Allow-Origin' *;

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

}

if ($request_method = 'GET') {

add_header 'Access-Control-Allow-Origin' *;

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

}

root html;

index index.html index.htm;

# 配置html在Nginx中打开

location ~* \.(html|htm)$ {

}

# 代理到8080端口

proxy_pass http://127.0.0.1:8080;

}

我们还必须把我们的html代码放在Nginx中html文件夹内，即使用Nginx当做我们的前端服务器。

URL重写

有时候我们仅仅只想将/api下的url反向代理到后端，可以通过在nginx.conf中配置url重写规则如下：

location / {

root html;

index index.html index.htm;

location ^~ /api {

rewrite ^/api/(.*)$ /$1 break;

proxy_pass https://api.shanbay.com/;

}

}

这样的话，我们只用处理/api下的url。

在配置文件中我们通过rewrite将URL重写为真正要请求的URL，通过proxy_pass代理到真实的服务器IP或者域名。

Cookie

如果Cookie的域名部分与当前页面的域名不匹配就无法写入。所以如果请求 www.a.com ，服务器 proxy_pass 到 www.b.com 域名，然后 www.b.com 输出 domian=b.com 的 Cookie，前端的页面依然停留在 www.a.com 上，于是浏览器就无法将 Cookie 写入。

可在nginx反向代理中设置：

location / {

# 页面地址是a.com，但是要用b.com的cookie

proxy_cookie_domain b.com a.com; #注意别写错位置了 proxy_cookie_path / /;

proxy_pass http://b.com;

}

总结

Nginx解决跨域问题通过Nginx反向代理将对真实服务器的请求转移到本机服务器来避免浏览器的"同源策略限制"。

参考文档：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/486083.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

android view使用方法,android – 如何使用getView()方法,它在哪里被调用？

android view使用方法,android – 如何使用getView()方法,它在哪里被调用？

我是Android开发的新手，并且一直遵循Android网站上提供的教程。我目前在视图教程部分，特别是Grid Views：Hello, Grid View Tutorial的教程。我无法通过适配器了解视图的形式。我明白您必须覆盖适配器类中的getView()方法，并且在此…
阅读更多...
牛客网--被3整除

牛客网--被3整除

题目描述 小Q得到一个神奇的数列: 1, 12, 123,...12345678910,1234567891011...。 并且小Q对于能否被3整除这个性质很感兴趣。 小Q现在希望你能帮他计算一下从数列的第l个到第r个(包含端点)有多少个数可以被3整除。 输入描述: 输入包括两个整数l和r(1 < l < r < …
阅读更多...
卷积神经网络爬虫实现新闻在线分类系统

卷积神经网络爬虫实现新闻在线分类系统

卷积神经网络&&爬虫实现网易新闻自动爬取并分类 项目地址 采用THUCnews全部数据集进行训练&#xff0c;效果如下。 详细实现见./text_classification 部署步骤如下&#xff1a; 运行环境 服务器&#xff1a;Ubuntu 16.04 数据库&#xff1a;Mysql 5.6 python&#xf…
阅读更多...
搞基础理论研究有什么用？

搞基础理论研究有什么用？

来源&#xff1a;数学中国人类文明的诞生是一个奇迹&#xff0c;构筑在现代科学技术基础之上的现代人类文明的诞生更是奇迹中的奇迹。这个奇迹中的奇迹的根基是现代技术及其广泛应用&#xff0c;而现代技术的根基则是现代科学&#xff0c;科学的根基是以数学为主要工具的基础科…
阅读更多...
android传感器博客,Android实现接近传感器

android传感器博客,Android实现接近传感器

本文实例为大家分享了Android实现接近传感器的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下1.接近传感器检测物体与听筒(手机)的距离&#xff0c;单位是厘米。一些接近传感器只能返回远和近两个状态&#xff0c;如我的手机魅族E2只能识别到两个距离&#xff1a;0CM…
阅读更多...
python 内存分析_python内存管理分析

python 内存分析_python内存管理分析

本文较为详细的分析了python内存管理机制。分享给大家供大家参考。具体分析如下&#xff1a;内存管理&#xff0c;对于Python这样的动态语言&#xff0c;是至关重要的一部分&#xff0c;它在很大程度上甚至决定了Python的执行效率&#xff0c;因为在Python的运行中&#xff0c;…
阅读更多...
牛客网--牛牛的闹钟

牛客网--牛牛的闹钟

牛牛总是睡过头&#xff0c;所以他定了很多闹钟&#xff0c;只有在闹钟响的时候他才会醒过来并且决定起不起床。从他起床算起他需要X分钟到达教室&#xff0c;上课时间为当天的A时B分&#xff0c;请问他最晚可以什么时间起床 输入描述: 每个输入包含一个测试用例。 每个测试用…
阅读更多...
由内而外：大脑是如何形成感官记忆的

由内而外：大脑是如何形成感官记忆的

大数据文摘出品来源&#xff1a;sciencedaily编译&#xff1a;张大笔茹通常&#xff0c;大脑会对我们感官收集的信息进行编码。为了感知环境并与之进行建设性的互动&#xff0c;这些感官信号需要在以往的经验和当前目标的背景下进行解释。最新一期的《科学》杂志上&#xff0c;…
阅读更多...
android设置大小能用小数,Android中关于保留小数点位数的处理

android设置大小能用小数,Android中关于保留小数点位数的处理

保留两位小数方法一&#xff1a;{double c 3.154215;java.text.DecimalFormat myformatnew java.text.DecimalFormat("0.00");String str myformat.format(c);}方式二&#xff1a;{java.text.DecimalFormat df new java.text.DecimalFormat("#.00");df.…
阅读更多...
oracle clob截取_Oracle数据库设计规范建议

oracle clob截取_Oracle数据库设计规范建议

Oracle-数据库设计规范建议来源于项目资料目的本规范的主要目的是希望规范数据库设计&#xff0c;尽量提前避免由于数据库设计不当而产生的麻烦&#xff1b;同时好的规范&#xff0c;在执行的时候可以培养出好的习惯&#xff0c;好的习惯是软件质量的很好的保证。数据库设计是指…
阅读更多...
牛客网--19校招--俄罗斯方块

牛客网--19校招--俄罗斯方块

题目描述 小易有一个古老的游戏机&#xff0c;上面有着经典的游戏俄罗斯方块。因为它比较古老&#xff0c;所以规则和一般的俄罗斯方块不同。 荧幕上一共有 n 列&#xff0c;每次都会有一个 1 x 1 的方块随机落下&#xff0c;在同一列中&#xff0c;后落下的方块会叠在先前的方…
阅读更多...
揭秘美国空军如何用AI技术提升“战斗力”

揭秘美国空军如何用AI技术提升“战斗力”

以AI技术为基础&#xff0c;美国空军正努力将自身转化为更强调协作性的组织。来源丨Forbes作者丨Kathleen Walch编译丨科技行者通过增加数据规模与相关素养提升&#xff0c;美国空军各部门及人员&#xff0c;将建立起更强的决策、战略、任务执行以及网络安全保障效率与能力。以…
阅读更多...
android 查询wifi信息的类,Android 获取wifi信息

android 查询wifi信息的类,Android 获取wifi信息

在androi中WIFI信息的获取可以通过系统提供的WIFI Service获取。WifiManager wifi_service (WifiManager)getSystemService(WIFI_SERVICE);WifiInfo wifiInfo wifi_service.getConnectionInfo();其中WifiInfo 中比较常用的信息有&#xff1a;/*info.getBSSID()&#xf…
阅读更多...
bashsupport插件_如何用 bash-support 插件将 Vim 编辑器打造成编写 Bash 脚本的 IDE

bashsupport插件_如何用 bash-support 插件将 Vim 编辑器打造成编写 Bash 脚本的 IDE

IDE(集成开发环境)就是这样一个软件&#xff0c;它为了最大化程序员生产效率&#xff0c;提供了很多编程所需的设施和组件。 IDE 将所有开发工作集中到一个程序中&#xff0c;使得程序员可以编写、修改、编译、部署以及调试程序。在这篇文章中&#xff0c;我们会介绍如何通过使…
阅读更多...
java--自动装箱，拆箱

java--自动装箱，拆箱

自动装箱&#xff1a;把基本类型转换为包装类类型 自动拆箱&#xff1a;把包装类类型转换为基本类型 之前无法自动装箱时&#xff1a; public static void main(String[] args) { int x 100; Integer i1 new Integer(x); //将基本数据类型包装成对象&#xff0c;装箱 int…
阅读更多...
数字孪生：如何撑起一个万亿市场的产业变革？

数字孪生：如何撑起一个万亿市场的产业变革？

来源&#xff1a; 脑极体 今天我们介绍一个在产业界如火如荼&#xff0c;但大众还非常陌生的概念&#xff1a;数字孪生&#xff08;Digital Twin&#xff09;。在解释这一晦涩难懂的概念前&#xff0c;我首先想到了一个人&#xff0c;前苏联著名的昆虫学家、数学家和哲学家——…
阅读更多...
二、python框架相关知识体系

二、python框架相关知识体系

Django框架 1、django框架、flask框架和Tornado框架的区别&#xff1f; django框架&#xff0c;内置组件多&#xff0c;自身功能强大&#xff0c;是一个大而全的框架&#xff0c;ORM、Admin、中间件、Form、ModelFrom、信号、缓存、csrf等flask框架&#xff0c;内置组件少&…
阅读更多...
Android跟web哪个好,比系统自带的WebView更好用 | AgentWeb

Android跟web哪个好,比系统自带的WebView更好用 | AgentWeb

名称AgentWeb语言Android平台GitHub作者Justson在混合化开发大行其道的今天&#xff0c;安卓开发经常会用到WebView&#xff0c;用于加载网页。系统自带的WebView性能和流畅度都一般&#xff0c;今天给大家推荐一款第三方WebView&#xff0c;性能比系统自带的要好&#xff0c;功…
阅读更多...
牛客网--2019校招--瞌睡

牛客网--2019校招--瞌睡

题目描述 小易觉得高数课太无聊了&#xff0c;决定睡觉。不过他对课上的一些内容挺感兴趣&#xff0c;所以希望你在老师讲到有趣的部分的时候叫醒他一下。你知道了小易对一堂课每分钟知识点的感兴趣程度&#xff0c;并以分数量化&#xff0c;以及他在这堂课上每分钟是否会睡着…
阅读更多...
preview窗口 unity_Unity3D在Preview中打印日志的方法

preview窗口 unity_Unity3D在Preview中打印日志的方法

Preview窗口除了可以预览模型之外&#xff0c;我们还可以做别的操作。今天我们来写个小工具在Preview窗口中显示调试信息。可以看下面的图&#xff0c;同样是打印 health 和 power 的日志&#xff0c;在 Preview 中显示比在 Console 中显示舒服多了。左边是Console中显示,右边是…
阅读更多...
最新文章

Copyright @ 2022~2023