nginx配置跨域访问,无法生效_页面跨域访问

nginx配置跨域访问,无法生效_页面跨域访问由于浏览器同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制。即会出现跨域请求禁止。通俗一点说就是如果存在协议、域名、端口或者子域名不同服务端,或一者为IP地址,一者为域名地址(在跨域问题上,域仅仅是通过"url的首部"来识别而不会去尝试判断相同的IP地址对应着两个域或者两个域是否同属同一个IP),之中任意服务端旗下的客户端发起请求其它服务端资源的访问行动都是跨域的,而浏览器为了安全…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

由于浏览器同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制。即会出现跨域请求禁止。

通俗一点说就是如果存在协议、域名、端口或者子域名不同服务端,或一者为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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187130.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • linux抓包查看请求接口源ip,linux 抓包「建议收藏」

    linux抓包查看请求接口源ip,linux 抓包「建议收藏」tcpdumphost172.16.29.40andport4600-X-s500tcpdump采用命令行方式,它的命令格式为:tcpdump[-adeflnNOpqStvx][-c数量][-F文件名][-i网络接口][-r文件名][-ssnaplen][-T类型][-w文件名][表达式]1.tcpdump的选项介绍-a…

    2022年10月14日
  • linux视频教程哪个最好_最好的Linux教程[通俗易懂]

    linux视频教程哪个最好_最好的Linux教程[通俗易懂]linux视频教程哪个最好Linuxisanamewhichbroadlydenotesafamilyoffreeandopen-sourcesoftwareoperatingsystemdistributionsbuiltaroundtheLinuxkernel.Linux的名称广泛地表示围绕Linux内核构建的一系列免费和开源软件操作系统发行版。…

  • 最详细的Vuex教程

    最详细的Vuex教程最详细的Vuex教程什么是Vuex?vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。引入Vuex(前提是已经用Vue脚手架工具构建好项目)1、利用npm包管理工具,进行安装vuex。在控制命令行中输入下边的命令就可以了。npminstallvuex

  • ssm整合RabbitMQ(一)「建议收藏」

    ssm整合RabbitMQ(一)「建议收藏」首先说一下RabbitMQ的配置安装好RabbitMQServer之后访问http://localhost:15672/开始首先在Admintab选项中新建一个vh,这个Name需要在后期的代码配置中用到。之后需要给该VH配置一个权限然后配置交换选择Exchangestab将Exchanges与刚才建立的VH绑定然后命名一个交换名字,这个名字在后期的…

  • Winrar去广告图文教程「建议收藏」

    Winrar去广告图文教程「建议收藏」一、前言1.1Winrar解压缩工具  市场上有很多优秀的压缩工具,常用的有Winrar和360压缩工具。Winrar是免费压缩工具,特色是每次使用都会弹出广告。影响用户体验和工作效率,当然最重要的是影响心情。效果如下图。图1-1、Winrar弹广告效果图二、问题处理说明2.1问题解决方式  此处使用工具Resourcehacker对winrar.e…

  • aop实现原理面试_aop ioc 面试怎么回答

    aop实现原理面试_aop ioc 面试怎么回答作用——用于处理系统中分布的各个模块的横切关注点(如:事务管理、日志、缓存等),是使用动态代理实现,在内存中临时为增强某个方法生成一个AOP对象,该对象含有目标对象的所有方法,在特定的切入点做了增强处理,并回调原来的方法。P:咋眼一看,不能直接理解很正常。动态代理的实现——主要分两种方式实现1、JDK动态代理原理说明——JDK动态管理通过反射接收被代理的类,该代理的类必须实现接口,核心是InvocationHandler和Proxy类。2、Cglib动态代理原理说明——Cglib通过.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号