微日志_免费提供日志记录|作品展示|学习教程|免费日记

解决React开发的项目打包后,无法访问接口

nginx代理 接口跨域 阅读:24

体验地址:暂无地址

现在大部分的项目制作,都是采用前后端分离的模式进行开发,前端有成熟的开发框架,像react,vue等,但开发过程中可能你不会发现服务端请求问题,但是打包后,部署线上却发现了问题,本篇文章记录一下,如何解决react开发的项目,打包后,无法访问接口问题。

直接上代码:

location /api {
     proxy_pass http://www.xxx.cn:8011/wb/api;
}

这一段的意思大概就是,将本域名下面的'/api'下面的所有内容,重新指向到‘http://www.xxx.cn:8011/wb/api’这个地址。

完整的一个server配置如下:

  server {
        listen       8000;
        server_name  localhost;
        location / {
            root /data/backstage;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api {
            proxy_pass http://www.xxx.cn:8011/wb/api;
        }
   }