• 利用nginx反向代理,解决前端跨域问题


    第一步:

    先下载nginx,下载地址:http://nginx.org/download/nginx-1.11.6.zip,我本地用的版本是1.11.6的。

    下载后保存本地,解压文件夹。(文件夹名不要带中文)

    第二步:

    新建一个测试页面。图中为测试简单的POST请求接口。(这个接口目前是允许跨域的)

    不满足浏览器的同源策略,因此会产生跨域问题。这里在接口做了跨域处理,所以可以调用成功~。

    第三步:

    先把接口的跨域处理去掉。注释图中的代码。

    现在就出现了跨域问题了~,那下面来讲解如何解决跨域问题。

    第四步:

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

    1:想把文件放到nginx的html根目录里面

    2:修改配置文件,打开conf文件夹下的nginx.conf

    加上这两段代码

    改好配置后,启动nginx服务。如图所示:

    服务启动后:

    然后打开浏览器 输入 http://localhost:8088/OSSDemo/Nginx.html 即可。这时候我们的地址就变成了8088了。而不是8020了。

    第五步:

    关键的一步来了。

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

    然后我们回到nginx.conf 配置一个反向代理路径,如图所示

    location /apis {
           rewrite  ^.+apis/?(.*)$ /$1 break;
           include  uwsgi_params;
           proxy_pass   http://localhost:6678;
    }

    保存,然后重新启动nginx服务。

    把页面上请求接口的路径改成 /apis/Test/GetDateTime

    http://localhost:6678/Test/GetDateTime =》 /apis/Test/GetDateTime

    然后重新请求访问接口。

    这样就完美解决了跨域问题了~~

    1.由配置信息可知,我们让nginx监听localhost的8088端口,网站A与网站B的访问都是经过localhost的8088端口进行访问。

    2.我们特殊配置了一个“/apis”目录的访问,并且对url执行了重写,最后使以“/apis”开头的地址都转到“http://localhost:6678”进行处理。

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

    代表重写拦截进来的请求,并且只能对域名后边以“/apis”开头的起作用,例如/apis/a.html。只对/apis重写。

    rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。

    break代表匹配一个之后停止匹配。

    简单的做了下笔记,写的不好的地方,请谅解~

  • 相关阅读:
    JSON序列化选项
    JOSN的stringify()和parse()方法
    html5增强元素--续
    html5页面增强元素
    js继承模式
    js常用设计模式
    js跨浏览器事件处理
    前端兴趣浓厚,后端提不起来兴趣
    padding的讲究
    margin的讲究
  • 原文地址:https://www.cnblogs.com/jincieryi/p/9630053.html
Copyright © 2020-2023  润新知