React项目部署

Question

问题描述

Ant design pro项目，本地访问后端接口是正常的，我打好包，部署到nginx里，页面能正常访问，但是访问不到后端接口404，是不是哪里配置错了？？nginx和后端代码是在同一台服务器上的

相关代码

项目的config.js

manifest: {  
  basePath: '/',  
},  
proxy: {  
  '/api/': {  
    target: 'http://我的后端ip:10001/',  
  changeOrigin: true,  
  pathRewrite: { '^/api': '' },  
  },  
}

nginx.conf配置

#user  nobody;
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
   
    server {
        listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root html;

    location / {
        try_files $uri $uri/ /index.html;
        }
    location /api/ {
            proxy_pass http://我的后端ip:10001/;
            proxy_set_header   X-Forwarded-Proto $scheme;
            proxy_set_header   X-Real-IP         $remote_addr;
    }
    }

}

Answer 1

生产环境要配置跨域，因为不是 localhost，把以下代码放到 nginx 的 http 段：

    # 允许跨域访问
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;