Nginx解决跨域

最新推荐文章于 2024-04-23 14:01:10 发布

前端黑

最新推荐文章于 2024-04-23 14:01:10 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

分类专栏：跨域

本文链接：https://blog.youkuaiyun.com/qq_38964133/article/details/89294159

跨域专栏收录该内容

1 篇文章

订阅专栏

本文深入解析跨域问题的根源——浏览器的同源策略，并详细介绍了几种解决跨域的方法：包括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'