Nginx解决跨域

本文深入解析跨域问题的根源——浏览器的同源策略,并详细介绍了几种解决跨域的方法:包括JSONP的GET请求方式,利用Nginx进行反向代理,以及通过CORS实现更全面的跨域资源共享。
跨域

什么是跨域

就是浏览器不能执行其他网站的脚本,他是由浏览器的同源策略造成,是浏览器施加的安全限制

同源是指 域名 协议 端口 均相同

跨域的解决方法 jsonp

用利用script标签 在里面进行ajax请求

<script>
$.ajax({
             url: 'http://api.douban.com/v2/movie/in_theaters',
             dataType: 'jsonp',
             success: function (res){
             	//使用模板引擎进行渲染js有一个有反引号的模板引擎
             	$(res.subjects).each(function(i,item){
                   $('#movies').append(`<li><img src="${item.images.large}"                      alt="" />${item.title}</li>`)
                   

             	})
             }
  	      })
</script>

在script标签中 指定请求的类型 dataType = ‘jsonp’

这种方式只能支持 get方式进行请求

使用Nginx 解决跨域

反向代理服务器

本地页面发起ajax请求 先转发到nginx nginx在转发给后台服务器 后台服务器返回数据给nginx nginx在返回给页面的技术 就是反向代理

在nginx.conf文件进行配置

配置如下
server {
        listen       3000;
        server_name  localhost;//当前服务器的域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://localhost:81;
            proxy_redirect default;
        }
        location /apis { #添加访问目录为/apis的代理配置
			rewrite  ^/apis/(.*)$ /$1 break;
			proxy_pass   http://localhost:82;
       }
上面的这些配置的相关解释  
让nginx 京听localhost的80端口 网站A 与网站B访问都是通过80端口  进行访问
我们另外特殊的配置了一个'/api'目录的访问,并且对url进行了重写  使/api的请求 都跳转到 http://localhost: 82 这个地址 
rewrite  ^/api/(.*)$ /$1 break; 
代表重写拦截进来的请求,并且只能对域名后边以“/api”开头的起作用

/ 的请求  转发到 http://localhost:81这个地址  进行处理

既然配置了Nginx进行跨域的请求  那么  请求的地址就需写一些变化  
ajax请求的地址  写成 /api  开头进行发送请求

这个的基础  是监听node服务器的运行端口  3000
一旦有发现请求就通过Nginx做相应的处理

node和nginx

node主要做一些业务的逻辑 nginx主要做一些ajax的跨域请求 处理一些静态页面 当需要请求后台资源时候 通过nginx进行转发 请求到数据在转发给前台页面

node主要处理并发的功能上 比如聊天系统 博客这一类的

也可以在nodejs中间件代理跨域

#####使用CORS跨域资源共享

cors支持所有请求

只需要在后台加上响应头允许域的请求 在悲情的Response header 加入以下配置

//指定允许其他域名访问
'Access-Control-Allow-Origin:*'//或指定域
//响应类型
'Access-Control-Allow-Methods:GET,POST'
//响应头设置
'Access-Control-Allow-Headers:x-requested-with,content-type'
乐播投屏是一款简单好用、功能强大的专业投屏软件,支持手机投屏电视、手机投电脑、电脑投电视等多种投屏方式。 多端兼容与网投屏:支持手机、平板、电脑等多种设备之间的自由组合投屏,且无需连接 WiFi,通过屏技术打破网络限制,扫一扫即可投屏。 广泛的应用支持:支持 10000+APP 投屏,包括综合视频、网盘与浏览器、美韩剧、斗鱼、虎牙等直播平台,还能将央视、湖南卫视等各大卫视的直播内容一键投屏。 高清流畅投屏体验:腾讯独家智能音画调校技术,支持 4K 高清画质、240Hz 超高帧率,低延迟不卡顿,能为用户提供更高清、流畅的视觉享受。 会议办公功能强大:拥有全球唯一的 “超级投屏空间”,扫码即投,无需安装。支持多人共享投屏、远程协作批注,PPT、Excel、视频等文件都能流畅展示,还具备企业级安全加密,保障会议资料不泄露。 多人互动功能:支持多人投屏,邀请好友加入投屏互动,远程也可加入。同时具备一屏多显、语音互动功能,支持多人连麦,实时语音交流。 文件支持全面:支持 PPT、PDF、Word、Excel 等办公文件,以及视频、图片等多种类型文件的投屏,还支持网盘直投,无需下载和转格式。 特色功能丰富:投屏时可同步录制投屏画面,部分版本还支持通过触控屏或电视端外接鼠标反控电脑,以及在投屏过程中用画笔实时标注等功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值