Nginx解决跨域代理 | 简单总结

1.开启Nginx

C:\Users\huangqiao>cd ../../

C:\>cd nginx-1.12.2

C:\nginx-1.12.2>nginx.exe

1.5重启Nginx:nginx -s reload

2.修改 域名和端口后需要进行的Nginx处理,到Nginx根目录
Nginx解决跨域代理 | 简单总结_第1张图片
3.将nginx.conf文件用notpad++打开,修改服务器域名地址,重新启动Nginx即可

4.nginx配置文件解决跨域问题原理
前后端分离涉及到需要跨域请求服务器资源,因此需要搭建Nginx服务,利用nginx的反向代理的功能。
通过把本地一个url前缀映射到要跨域访问的web服务器上,就可以实现跨域访问。
对于浏览器来说,访问的就是同源服务器上的一个url。而nginx通过检测url前缀,把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求,并且并不知道这个请求是来自代理服务器的。
简单说,nginx服务器欺骗了浏览器,让它认为这是同源调用,从而解决了浏览器的跨域问题。又通过重写url,欺骗了真实的服务器,让它以为这个http请求是直接来自与用户浏览器的。

两个文件的Nginx配置
Nginx解决跨域代理 | 简单总结_第2张图片
这时有一点注意:不要使用webstorm提供的静态服务器打开页面调试,否则会提示404,用配置好的nginx路径打开.
打开方式:http://localhost:7777/index.html即域名前缀+端口+index文件。

欢迎关注公众号:【抓住重点】,获取更多编程周边技能,与博主一起进步Nginx解决跨域代理 | 简单总结_第3张图片

你可能感兴趣的:(后端,nginx,服务器,前端)