nginx配置文件和跨域问题

一、nginx

1. 关于nginx配置文件

server {
        listen       8000;
        server_name  localhost; # 标表示监听的主机地址是什么
        # / 表示匹配路径为/的url
        location / {
           proxy_pass http://localhost:5500;
        }
 
        # /user 表示访问以/user 开头 的地址 如/username,/user/find等
        location /user {
           proxy_pass http://localhost:3000;
        }
 
    }

• server：就相当于一台虚拟主机，一个虚拟主机在抽象的服务中就相当于一条主机，一个nginx可以配置多台虚拟主机
• listen：表示监听来自某个服务的请求
  • listen 127.0.0.1:8000 【只监听来自127.0.0.1这个ip，请求8000的端口号】
  • listen 127.0.0.1; 【只监听来自127.0.0.1这个ip，请求80端口的请求（指定端口，默认是80）】
  • listen 8000; 【监听来自所有ip，请求8000的端口】
  • listen *:8000; 【和上面效果一样】
  • listen localhost:8000; 【和第一种效果一样】
  • 小结：listen监听的是向当前nginx所在主机发送的请求
• server_name：表示当前这台虚拟主机的主机名

2. location & proxy_pass

• 这个主要问题，就是关于 location 和 proxy_pass 后面加上斜杠的区别和组合

• 举例：
  • nginx服务器及端口 127.0.0.1:80
  • 后端服务：127.0.0.1:8080
  • 测试：url -> http://127.0.0.1:80/day06api/api/abc

location /day06api/ {
   proxy_pass http://127.0.0.1:8080/;
}
# 实际访问地址：http://127.0.0.1:8080/api/abc

location /day06api {
   proxy_pass http://127.0.0.1:8080/;
}
# 实际访问地址：http://127.0.0.1:8080//api/abc

location /day06api/ {
   proxy_pass http://127.0.0.1:8080;
}
#实际访问地址：http://127.0.0.1:8080/day06api/api/abc

location /day06api {
   proxy_pass http://127.0.0.1:8080;
}
#实际访问地址：http://127.0.0.1:8080/day06api/api/abc

location /day06api/ {
   proxy_pass http://127.0.0.1:8080/server/;
}
#实际访问地址：http://127.0.0.1:8080/server/api/abc

location /day06api {
   proxy_pass http://127.0.0.1:8080/server/;
}
#实际访问地址：http://127.0.0.1:8080/server//api/abc

location /day06api/ {
   proxy_pass http://127.0.0.1:8080/server;
}
#实际访问地址：http://127.0.0.1:8080/serverapi/abc

location /day06api {
   proxy_pass http://127.0.0.1:8080/server;
}
#实际访问地址：http://127.0.0.1:8080/server/api/abc

• 如果 proxy_pass 端口号之后有斜杠，就是将原来的url中uri部分去掉 location 部分字符，拼接在 proxy_pass 后面
• 如果 proxy_pass 端口号之后没有斜杠，就是使用 proxy_pass 中的ip和端口号替代原来 url 中的ip和端口号

二、关于跨域问题

• 问题产生的原因：
  • 是因为前后端分离，浏览器中前端页面的 （协议 || ip || 端口号） 和向后端发送的请求中 （协议 || ip || 端口号）中任何一个不同造成的
• 解决问题的方法：
  • 将前后端都通过代理的方式进行访问，使用nginx
• 例子：
  • 前端页面是127.0.0.1:9012/front/show
  • 向后端发送请示：127.0.0.1:8021/behind/test1
  • 这个时候前台向后台发送请求，因为跨域问题，浏览器会报错，无法进行访问

#配置nginx
server {
        listen       9003;
        server_name  localhost; # 标表示监听的主机地址是什么
        # / 表示匹配路径为/的url
        location /front {
           proxy_pass http://127.0.0.1:9012/front;
        }
 
        # /user 表示访问以/user 开头 的地址 如/username,/user/find等
        location /behind {
           proxy_pass http://127.0.0.1:8021/behind;
        }
 
    }

• 小结：跨域问题，是因为浏览器防止不同源网站可以互相访问缓存信息而产生的