用nignx解决前后端分离跨域问题 - 每日一招

Posted 2021-04-30 Sumslack团队

背景与需求描述 

在我们日常编写前后台分离的项目中，就会面临静态资源和后台服务不在一个域下，就存在跨域调用接口问题，有好几种办法可以解决：

• 后台代码引入cors，引入服务调用来源检测，那么前端代码即可实现后台代码的跨域调用；

• 使用nodejs的http-proxy-middle，引入中间层代理后台的http服务，因为nodejs和后台服务在同一个局域网；

• 本文介绍的nginx方式，将静态资源和后台服务配置在一个nginx server里

代码实现 

 1server {
 2        listen       80;
 3        server_name  xx.yy.com;
 4        charset utf-8;
 5        index index.html index.htm;
 6        root /home/html/project/xxx; #你的静态资源根目录
 7        location / {
 8            try_files $uri $uri/ /index.html =404;
 9        }
10       location /api {  #你的后台服务地址
11        proxy_set_header Upgrade $http_upgrade;
12        proxy_set_header Connection "upgrade";
13        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
14        proxy_set_header Host $host;
15        proxy_http_version 1.1;
16        proxy_pass http://192.168.1.25:8787;
17       }
18       location /api2 {  #你的另外一个后台服务地址
19        proxy_set_header Upgrade $http_upgrade;
20        proxy_set_header Connection "upgrade";
21        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
22        proxy_set_header Host $host;
23        proxy_http_version 1.1;
24        proxy_pass http://192.168.1.53:8181;
25        rewrite ^/api2/user/signIn /user/signIn break; #定义一个重写规则
26       }
27}




那么在开发环境里怎么办？可以通过配置本地hosts文件解决~