Nginx 方向代理解决跨域问题-2
概述
在浏览器端进行 Ajax 请求时会出现跨域问题,那么什么是跨域,如何解决跨域呢?先看浏览器端出现跨域问题的现象,如下图所示
什么是跨域问题?
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 JavaScript 施加的安全限制。
什么是同源?
所谓同源是指,域名,协议,端口均相同
- http://www.adozoo.com --> http://admin.adozoo.com 跨域
- http://www.adozoo.com --> http://www.adozoo.com 非跨域
- http://www.adozoo.com --> http://www.adozoo.com:8080 跨域
- http://www.adozoo.com --> https://www.adozoo.com 跨域
如何解决跨域问题?
使用 CORS(跨资源共享)解决跨域问题
CORS 是一个 W3C 标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了 AJAX 只能同源使用的限制。
CORS 需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE 浏览器不能低于 IE10。整个 CORS 通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS 通信与同源的 AJAX 通信没有差别,代码完全一样。浏览器一旦发现 AJAX 请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨源通信(在 header
中设置:Access-Control-Allow-Origin
)
使用 JSONP 解决跨域问题
JSONP(JSON with Padding)是 JSON 的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com
的网页无法与 server2.example.com
的服务器沟通,而 HTML 的 <script>
元素是一个例外。利用 <script>
元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析(需要目标服务器配合一个 callback
函数)。
CORS 与 JSONP 的比较
CORS 与 JSONP 的使用目的相同,但是比 JSONP 更强大。
JSONP 只支持 GET 请求,CORS 支持所有类型的 HTTP 请求。JSONP 的优势在于支持老式浏览器,以及可以向不支持 CORS 的网站请求数据。
使用 Nginx 反向代理解决跨域问题
以上跨域问题解决方案都需要服务器支持,当服务器无法设置 header
或提供 callback
时我们就可以采用 Nginx 反向代理的方式解决跨域问题。
以下为文件上传的跨域配置方案:
user nginx;
worker_processes 1;events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {listen 80;server_name upload.myshop.com;add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';location / {proxy_pass http://192.168.0.104:8888;if ($request_method = 'OPTIONS') {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;# 解决假请求问题,如果是简单请求则没有这个问题,但这里是上传文件,首次请求为 OPTIONS 方式,实际请求为 POST 方式# Provisional headers are shown.# Request header field Cache-Control is not allowed by Access-Control-Allow-Headers in preflight response.add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range;return 200;}}}
}
Nginx 方向代理解决跨域问题-2相关推荐
- 通过nginx反向代理解决跨域
先写一个发送跨域请求的页面index.html <html> <head><title></title> </head> <body& ...
- 利用nginx 反向代理解决跨域问题
利用nginx 反向代理解决跨域问题 参考文章: (1)利用nginx 反向代理解决跨域问题 (2)https://www.cnblogs.com/hpx2020/p/9928175.html 备忘一 ...
- nginx反向代理解决跨域问题,使本地调试更方便
nginx反向代理解决跨域问题,使本地调试更方便 参考文章: (1)nginx反向代理解决跨域问题,使本地调试更方便 (2)https://www.cnblogs.com/gwf93/p/102951 ...
- nginx正向代理解决跨域问题
原理 为了更好的理解nginx解决跨域的原理,首先来了解一下跨域是怎么样产生的. 因为浏览器的同源政策,就会产生跨域.比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者 ...
- nginx解决浏览器跨域问题_前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC解决跨域问题,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式 ...
- Nginx 反向代理解决跨域问题
目录 前言 Nginx 反向代理常用配置 Server location proxy_pass add_header OPTIONS 请求 proxy_set_header 跨域的 cookie 传输 ...
- Nginx反向代理解决跨域问题(个人学习总结)
一.理解Nginx Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并 ...
- 【Nginx反向代理解决跨域】
跨域 写在前面 当今互联网行业,大部分Web项目基本都是采用的前后端分离模式.前端为H5项目,后端为Java.PHP.Python等项目.而且大部分后端服务并不会只部署一套服务,而是会采用Nginx对 ...
- webstorm前端使用Nginx 反向代理解决跨域问题
1.webstorm设置端口 2. 3. 4. 5. 把项目放到nginx安装目录的html文件夹下: 6. 配置nginx.conf文件 server {listen 8090; #监听端口serv ...
最新文章
- 基于 REST 的 Web 服务:基础
- clang 搭建和编译boost 和zero ICE库 (Ubuntu10 64)
- 成功解决ModuleNotFoundError: No module named 'urllib2'
- 一块V100运行上千个智能体、数千个环境,这个曲率引擎框架实现RL百倍提速
- spring条件注解有哪些_Spring4有条件
- Java经典设计模式 总览
- oracle根据当前月份往前,Oracle SQL - 根据月份对时间序列分区求和
- linux ln mysql.sock_linux中MySQL连接找不到mysql.sock文件
- mysql怎么安装安全补丁_讲解SQL Server安装sp4补丁报错的解决方法_MySQL
- 【HDU 5956】The Elder(树上斜率DP)
- 我是80后程序员,我支持正版!
- react中引入swiper详细教程 亲测没测出来
- 车载通信——CAN收发器选型(低功耗)
- spark-sql总结
- 关于MySQL认证的东东
- Python练手----字符串的密钥加密
- 北京外企 外服控股:人服国企借道资产重组上市,发 力数字化谋新篇
- [插件发布] KK_XSHOW首页多格(Discuz) DX2.0 首款支持x2的首页N格焦点图!
- Origami五分钟入门秘籍
- 关于EasyUI DataGrid行编辑时嵌入时间控件