欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

NGINX解决跨域

程序员文章站 2022-07-13 09:54:25
...

NGINX解决跨域

自己总结一下,加深记忆,相信下图的情况很多人都遇到过,具体产生原因我就不详讲了.
NGINX解决跨域
一.为了不在nginx.conf做太多改动,自己创建一个配置文件,并在nginx.conf配置导入;
1.创建自定义配置文件.
NGINX解决跨域
自定义配置文件内容:

server
{
   listen 3003;
   server_name localhost;
   ## alias属性值为前端项目根路径
   ## 定义alias属性作用是:当访问localhost:3003/index.html相当于访问 D:/r/work/hbulider/demo/demo1/test/路径下的index.html;
   location / {
      alias  D:/r/work/hbulider/demo/demo1/test/;
   }
   ##  /achdev 表示以/achdev 开头的url,包括/achdev 1,/achdev/son,或者/achdev/son/grandson
   ##  实际访问为http://192.168.27.132:8084/achdev开头的url
   location /achdev {
	   proxy_pass http://192.168.27.132:8084; #请求代理地址
   }
   ##  /ok/表示精确匹配以ok开头的url,/achdev是匹配不到的,/ok/son则可以
   location /ok/ {
       proxy_pass http://localhost:3000;
   }
}

导入方式:在nginx.conf里的http里通过include指定导入配置文件
NGINX解决跨域
三.通过localhost:3003/index.html访问
NGINX解决跨域
访问成功!!!

总结:
一.Nginx可以监听多个端口
配置方式:
1.在server段写上2个Listen就可以了.
2.在 nginx.conf 中配置多个个server即可

二.location属性:
Nginx设置alias实现虚拟目录 alias与root的用法区别

  1. location ~ ^/awstats/ {
    root /home/awstats/;
    }
    访问:http://test.com/awstats/ 实际访问的是/home/awstats/awstats/
  2. location ~ ^/awstats/ {
    alias /home/
    }
    访问:http://test.com/awstats/ 实际访问的是/home/
  3. location ~ ^/awstats/ {
    #使用alias时目录名后面一定要加“/”
    alias /home/awstats/;
    }

访问:http://test.com/awstats/ 实际访问的是/home/awstats/
4.location ~ ^/awstats/ {
root /home/;

}
访问:http://test.com/awstats/ 实际访问的是/home/awstats/
总结:alias是替换,root是加指定前缀

代理路径:
proxy_pass http://192.168.27.132:8084;

上一篇: TDD实践

下一篇: CORS跨域 实践