nginx 解决客户端跟服务跨域问题

1、功能需求:前后端分离场景,前端开发的时候会起一个本地地址,例如:localhost:3000 。而后端开发好api之后也会有一个本地地址,例如:localhost:7001。那么前端用ajax请求后端api的时候,由于端口不一致,导致跨域问题。

2、解决方案:配置nginx代理配置,让两个端口都指向同一个端口则解决跨域问题,这里我设置了一个共同端口:3002,因为后端接口会用 /api 开头,所以我设置的是/api请求的地址就指向7001端口地址。

3、配置代码:修改nginx下的nginx.conf文件,然后 $sudo nginx -s reload 重启生效。

server {
         listen 3002;
         server_name localhost;
         location / {
             proxy_pass http://localhost:3000;
         }
 
         location /api {
             proxy_pass http://localhost:7001;
        }
}

4、结果截图:使用axios请求,状态为200,后端接口正确返回。

nginx 解决客户端跟服务跨域问题_第1张图片

nginx 解决客户端跟服务跨域问题_第2张图片

 

你可能感兴趣的:(nginx 解决客户端跟服务跨域问题)