niginx跨域问题

利用nginx 反向代理解决跨域问题

        </h1>
        <div class="clear"></div>
        <div class="postBody">

  说到nginx，不得不说真的很强大，也带来很多便利用于解决一些头疼的难题。

  一般来说可以用来做：静态页面的服务器、静态文件缓存服务器、网站反向代理、负载均衡服务器等等，而且实现这一切，基本只需要改改那万能的配置文件即可。

之前的博文记录了作为负载均衡。这里先记录一下作为静态页面的服务器和反向代理跨域的使用。

结合之前 《angularjs+webapi2 跨域Basic 认证授权》的案例，对跨域的方式进行改造一下。

一.静态页面服务器

nginx.conf 的配置（其实默认的也是如此，所以作为静态服务器只需要将静态文件移动到nginx下的html文件夹里就可以了）

 

复制代码

server {
      listen       8094; #监听端口
      server_name  localhost; #

      #charset koi8-r;

      #access_log  logs/host.access.log  main;

     location / {
          root   html;#文件根目录
          index  index.html index.htm;#默认起始页
      }

        }
复制代码

然后打开浏览器 输入 localhost:8094 即可

2MU[LA7GS05[]15JD3[WH(Q

就是这么简单

二.反向代理服务器-》跨域

之前我们跨域是借助了浏览器对 Access-Control-Allow-Origin 的支持。但有些浏览器是不支持的，所以这并非是最佳方案

现在我们来利用nginx 通过反向代理 满足浏览器的同源策略实现跨域

首先，我先注释掉之前的跨域设置

image

image

然后访问一下index1.html

image

提示了跨域问题

然后我们回到nginx.conf 配置一个反向代理路径（新增红色部分）

复制代码
server {
        listen       8094;
        server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

   location / {
        root   html;
        index  index.html index.htm;
    }



       location /apis {

rewrite  ^.+apis/?(.*)$ /$1 break;

include  uwsgi_params;

proxy_pass   http://localhost:1894;

}
}
复制代码

配置说明：配置一个/apis  重写到我们真正的api地址http://localhost:1894  形成一个代理的过程。

然后更改一下index1.html的api请求地址

image

这样这个api的地址就跟当前页面index1.html处于同源位置了。就是我们配置的nginx监听地址 localhost:8094

然后我们再次在浏览器中访问 index1.html   可能请求到的知识缓存页面 请清除缓存或重启nginx

image

没有了跨域问题。 这里因为我之前登陆过 并记录了 token 所以没有提示登录

小结：写得不是很细，当作笔记，如伤过客，诚挚抱歉。

带着责任起飞
<div id="blog_post_info">
8
1 
<div class="clear"></div>
<div id="post_next_prev">

<a href="https://www.cnblogs.com/bninp/p/5512057.html" class="p_n_p_prefix">« </a> 上一篇：    <a href="https://www.cnblogs.com/bninp/p/5512057.html" title="发布于 2016-05-20 14:44">angularjs+webapi2 跨域Basic 认证授权（二）</a>
<br>
<a href="https://www.cnblogs.com/bninp/p/7793597.html" class="p_n_p_prefix">» </a> 下一篇：    <a href="https://www.cnblogs.com/bninp/p/7793597.html" title="发布于 2017-11-06 16:00">windows 上用 docker 部署aspnetcore 2.0</a>

posted @ 2016-07-22 10:37  学而知之  阅读(66553)  评论(9)  编辑  收藏
</div><!--end: topics 文章、评论容器-->

   回复 引用 
			</div>

#1楼

2017-03-09 13:19

        <a id="a_comment_author_3635858" href="https://www.cnblogs.com/hero-89/" target="_blank">HALDW</a>

		</div>
		<div class="feedbackCon">
mark
支持(0) 反对(0) 
		</div>
	</div>
	<div class="feedbackItem">
		<div class="feedbackListSubtitle">
			<div class="feedbackManage">
				&nbsp;&nbsp;
回复 引用 
			</div>

#2楼

2018-02-06 22:39

        <a id="a_comment_author_3905133" href="https://www.cnblogs.com/redbaby/" target="_blank">redbaby</a>

		</div>
		<div class="feedbackCon">
mark
支持(0) 反对(0) 
		</div>
	</div>
	<div class="feedbackItem">
		<div class="feedbackListSubtitle">
			<div class="feedbackManage">
				&nbsp;&nbsp;
回复 引用 
			</div>

#3楼

2018-04-09 16:45

        <a id="a_comment_author_3946848" href="https://www.cnblogs.com/heisenberg_zhe/" target="_blank">heisenberg_zhe</a>

		</div>
		<div class="feedbackCon">
真心很感谢博主!!!!!!!!!
支持(0) 反对(0) 
		</div>
	</div>
	<div class="feedbackItem">
		<div class="feedbackListSubtitle">
			<div class="feedbackManage">
				&nbsp;&nbsp;
回复 引用 
			</div>

#4楼

[楼主]

2018-04-10 09:19

        <a id="a_comment_author_3947336" href="https://www.cnblogs.com/bninp/" target="_blank">学而知之</a>

		</div>
		<div class="feedbackCon">
@ heisenberg_zhe
客气，难得有人评论，哈哈。
支持(0) 反对(0) 
		</div>
	</div>
	<div class="feedbackItem">
		<div class="feedbackListSubtitle">
			<div class="feedbackManage">
				&nbsp;&nbsp;
回复 引用 
			</div>

#5楼

2018-09-21 23:33

        <a id="a_comment_author_4074000" href="https://home.cnblogs.com/u/753211/" target="_blank">yongf</a>

		</div>
		<div class="feedbackCon">
作为一个客户端开发，终于知道 Nginx 的反向代理是啥意思了，谢谢啦~
支持(0) 反对(0) 
		</div>
	</div>
	<div class="feedbackItem">
		<div class="feedbackListSubtitle">
			<div class="feedbackManage">
				&nbsp;&nbsp;
回复 引用 
			</div>

#6楼

2019-05-21 11:03

        <a id="a_comment_author_4260674" href="https://home.cnblogs.com/u/1483034/" target="_blank">我最洋气</a>

		</div>
		<div class="feedbackCon">
为什么我这个请求链接不对呢，我想请求服务器，结果链接是本地的
支持(0) 反对(0) 
		</div>
	</div>
	<div class="feedbackItem">
		<div class="feedbackListSubtitle">
			<div class="feedbackManage">
				&nbsp;&nbsp;
回复 引用 
			</div>

#7楼

2020-01-17 13:57

        <a id="a_comment_author_4487069" href="https://www.cnblogs.com/shiazhen/" target="_blank">阿臻</a>

		</div>
		<div class="feedbackCon">
使用反向代理过去proxy_pass ,这个也可以吧,我只是问问,看到好多人用
支持(0) 反对(0) 
		</div>
	</div>
	<div class="feedbackItem">
		<div class="feedbackListSubtitle">
			<div class="feedbackManage">
				&nbsp;&nbsp;
回复 引用 
			</div>

#8楼

[楼主]

2020-01-17 14:00

        <a id="a_comment_author_4487073" href="https://www.cnblogs.com/bninp/" target="_blank">学而知之</a>

		</div>
		<div class="feedbackCon">
@ 阿臻
是的呀，就是proxy_pass
支持(0) 反对(0) 
		</div>
	</div>
	<div class="feedbackItem">
		<div class="feedbackListSubtitle">
			<div class="feedbackManage">
				&nbsp;&nbsp;
回复 引用 
			</div>

#9楼

    <span id="comment-maxId" style="display:none">4487088</span>
    <span id="comment-maxDate" style="display:none">2020/1/17 下午2:11:45</span>

2020-01-17 14:11

        <a id="a_comment_author_4487088" href="https://www.cnblogs.com/shiazhen/" target="_blank">阿臻</a>

		</div>
		<div class="feedbackCon">
重写路径的正则什么意思啊,
支持(0) 反对(0) 
		</div>
	</div>

<div id="sideBar">
	<div id="sideBarMain">

< 2020年6月 >
日 一 二 三 四 五 六
31 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 1 2 3 4
5 6 7 8 9 10 11 
		<div id="leftcontentcontainer">
			<div id="blog-sidecolumn">

	</div><!--end: sideBarMain -->
</div><!--end: sideBar 侧边栏容器 -->
<div class="clear"></div>
</div>

转自https://www.cnblogs.com/bninp/p/5694277.html

posted @ 2020-06-05 11:22  máthēma  阅读(140)  评论(0)    收藏  举报