利用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

然后重新请求访问接口。

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

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代表匹配一个之后停止匹配。

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