H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【nginx】React项目部署

问题描述

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;
}
}
}

回答

生产环境要配置跨域,因为不是 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;

本文地址:H5W3 » 【nginx】React项目部署

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址