Nginx配置跨域访问
由于浏览器同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制。即会出现跨域请求禁止。
通俗一点说就是如果存在协议、域名、端口或者子域名不同服务端,或一者为IP地址,一者为域名地址(在跨域问题上,域仅仅是通过"url的首部"来识别而不会去尝试判断相同的IP地址对应着两个域或者两个域是否同属同一个IP),之中任意服务端旗下的客户端发起请求其它服务端资源的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。
但很多时候我们却又不得不去跨域请求资源,这个时候就需要我们想方法去绕过浏览器同源策略的限制了。
常见的跨域请求解决方法:
1.Jsonp 利用script标签发起get请求不会出现跨域禁止的特点实现
2.window.name+iframe 借助中介属性window.name实现
3.Cors需要服务器设置header:Access-Control-Allow-Origin
4.Nginx反向代理 可以不需要目标服务器配合,不过需要Nginx中转服务器,用于转发请求(服务端之间的资源请求不会有跨域限制)
Nginx跨域访问解决方案
使用Ajax跨域请求资源,Nginx作为代理,出现以下错误:
The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed
解决方法:
使用Nginx作为反向代理服务器,并在配置中对应的location下添加上如下的设置
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header Cache-Control private;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
完整配置如下:
server {listen 80; server_name 192.168.16.190;root /home/fastdfs/file/data;index index.htm index.html;add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Credentials' 'true';add_header Cache-Control private;add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';location / {# 此处用于处理 H5 的 History时 重写的问题if (!-e $request_filename) {rewrite ^(.*) /index.html last;break;}}# 代理服务端接口location /api {if ($request_method = 'OPTIONS') {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;return 200;}proxy_pass http://192.168.16.191:3000/api; #将真正的请求代理到API 服务地址}location ^~/cross_origin/ {rewrite ^/cross_origin/(.*)$ /$1 break;if ($request_method = 'OPTIONS') {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;return 200;}proxy_pass http://192.168.16.191:3000/cross_origin ; #将真正的请求代理到API 服务地址}
}
服务端允许跨域配置:
#region 设置允许跨域,允许复杂请求
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,PATCH,OPTIONS");HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization");//HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");HttpContext.Current.Response.End();
}
#endregion
备注: 如果服务器设置了允许跨域,使用Nginx代理里面就不需要了(或者就不用使用Nginx了)
大家可以参考这个Nginx文档:http://nginx.org/en/docs/http/ngx_http_headers_module.html
cores里面参数含义请参考:https://blog.csdn.net/m0_37886429/article/details/83617880
Nginx配置跨域访问相关推荐
- nginx配置跨域访问后不生效,仍然显示跨域问题
解决方案 首先,我们先确定跨域源目标没写错,可以先将Allow-Origin改成*测试 server {listen 80;server_name https://www.test.com;locat ...
- Nginx配置跨域请求 Access-Control-Allow-Origin *
Nginx配置跨域请求 Access-Control-Allow-Origin * 当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is p ...
- fastdfs nginx 文件跨域访问
搭好fastdfs以后,正常访问浏览器没问题,但是前端获取的时候会出现跨越访问.因为访问fastdfs的图片的时候是用Nginx访问的,nginx当中要配置跨域访问,前端才能正常获取图片. 一定要在l ...
- nginx配置跨域、gzip加速、代理详细讲解
1.配置跨域 这个很简单,直接打开配置nginx.conf ,在http下配置下面三行代码:当然如果你是想某一个虚拟主机下跨域,那就在哪个server下面添加 add_header Access-Co ...
- nginx实现跨域访问(案例cookie实现跨域,)多方案实现
案例cookie实现跨域 (我的博客里有更新) 跨域,顾名思义,个人理解就是:任意两个url只要协议.域名.端口有任何一个不同,都被当作是不同的域,相互访问就会有跨域问题. 方案一(前端需要实现跨域) ...
- nginx实现跨域访问
跨域概念 简单来说:两个url只要协议.域名.端口有任何一个不同,都被当作是不同的域,相互访问就会有跨域问题. 案例 例如:在开发前后端完全分离的系统中,服务端代码属于一个工程,前端代码属于另一个工程 ...
- Spring Boot配置跨域访问策略
From: https://blog.csdn.net/garyond/article/details/80192760 1. 引言 我们在开发过程中通常因为不同应用之间的接口调用或者应用之间接口集成 ...
- react 访问后端_react前端用nginx怎么配置跨域访问后端restful api?
开发机器是windows,windows中安装了centos虚拟机做restful api服务器,在浏览器中可以正常访问该api服务器: http://192.168.33.3:8080/articl ...
- nginx php 跨域访问权限,nginx + php 实现跨域请求填坑笔记
最近自己构建了一个轻量级的 MVC 框架,现在将该MVC用于生产环境的项目中,目前因为项目中有跨域的请求,所以需要做一些CORS授权,但在实际使用出现了一些问题,目前已解决,故做下记录. 服务器:ce ...
最新文章
- QFIL工具如何导出手机分区数据
- 程序员面试题精选100题(39)-颠倒栈[数据结构]
- 让谷歌、百度最快最多地收录您的网站
- TF2.0-tf.keras.callbacks.EarlyStopping
- linux内核之中断和异常
- 自己对war包解压的误区
- 【blender】基本操作总结-最常用的快捷键
- css之calc,初探CSS3中的calc()功能
- 【C语言】易错题 and 易混淆知识
- 用 InstallShieldX 做教育片的安装
- Rancher配置域名证书
- 现在快手流量怎么样?如何增加流量?
- python的符号怎么打_python plt可视化――打印特殊符号和制作图例代码
- 在AutoCAD2015如何设置栅格的显示与设置
- linux下双网卡共享上网配置
- C语言文件操作实例代码
- Yolov5:强大到你难以想象──新冠疫情下的口罩检测
- Python报错:pymysql.err.IntegrityError: (1062, “Duplicate entry ‘1‘ for key ‘PRIMARY‘“)
- kalman滤波总结
- 如何像学霸一样高效学习?
热门文章
- python 设计模式_Python设计模式(第2版)
- win10安装怎么跳过微软账户登录
- 什么是锚点(AnchorPoint)
- 华为云IoT亮相厦门国际物联网博览会,智简联接助力行业智能升级
- python fileinput_Python fileinput模块使用介绍
- [POJ题目分类][转]
- python中kmeans_kmeans与kmeans++的python实现
- Nginx资料之types
- Linux中如何查看某个端口是否被占用的方法
- 一张图让你搞懂scrollHeight、offsetHeight等