因需要,用react做一些东西,方便起见,直接选用了阿里的ant design pro,看了react的一些文档便匆忙上手,遇到了不少坑

本地开发更换为服务器api

ant-design-pro中使用了mock,我想不使用mock,测试用已经写好的api服务,按照官方文档

// .roadhogrc.mock.js
export default {
  'GET /api/*': 'https://your.server.com/api/',
};

设置后发现一直报错404,通过控制台查看访问的api是 localhost:8000, 以为不生效

找了好久才发现react(用的这个ant design pro)不像angular那样直接访问真实的地址(我用angular访问的是api地址),用的是代理,知道了原因就好整了,按照服务器的路径进行拼接

部署到服务器

写完所有的页面之后,build打包部署到服务器,此时发现又出了问题,本地可以的api此时没用了

经查,此处需要nginx设置代理

如下

server
    {
        listen 80;
        server_name aiblogs.cn;
        index index.html;
        root  /root;

        location ^~/api/ {
            rewrite ^/(.*)$ /$1 break;
            proxy_pass http://api.aiblogs.cn;
        }

    }