nginx代理静态后访问后端接口跨域

本文介绍如何配置Nginx,以解决通过Nginx代理静态资源后访问后端API接口出现的跨域问题。通过在Nginx配置文件中添加适当的设置,可以实现跨域请求的顺利进行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

直接在nginx.conf加上

	location /api {
    
            proxy_pass  xxxx.xxx.com/xxxx # 接口的url;
			proxy_redirect off;
            # 后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
            proxy_set_header  Host  $host;
            proxy_set_header  X-Real-IP  $remote_addr;  
            proxy_set_header  
### 配置 Nginx 作为反向代理 为了使 Nginx 同时处理前端静态资源和后端 API 请求,需对 Nginx 的配置文件 `nginx.conf` 或者站点特定的 `.conf` 文件进行适当修改。以下是具体的实现方法。 #### 处理前端静态资源 当用户访问根路径或其他指定路径时,Nginx 应该提供存储于本地磁盘上的 HTML、CSS 和 JavaScript 等静态文件。这可以通过定义 location 块并指向这些文件的位置来完成[^1]: ```nginx server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; # 设置静态资源目录位置 index index.html index.htm; try_files $uri $uri/ /index.html; # 将未匹配到的请求重定向至首页,适用于单页应用(SPA) } } ``` 此段代码确保任何对于不存在 URL 的请求都会被导向到应用程序的主要入口点 (`index.html`),这对于构建基于路由的历史模式 (history mode) 单页面应用程序非常重要。 #### 转发后端 API 请求 为了让 Nginx 正确地将 `/api/*` 开头的请求转发给后端服务,同样需要创建一个新的 location 块专门用于此类目的。在此示例中,假定后端运行在一个不同的 IP 地址上,并监听着标准 HTTP 端口 9028[^2]: ```nginx location /api/ { proxy_pass http://171.35.40.185:9028/; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } ``` 上述配置不仅指定了目标服务器的信息,还设置了几个重要的头部字段以便让下游的服务知道原始请求的一些细节信息。 #### 安全性和资源共享(CORS) 考虑到安全性因素,在生产环境中不建议将 CORS header 中的 Access-Control-Allow-Origin 设为通配符(*),尤其是在涉及敏感数据交换的情况下。相反,应该明确列出允许哪些名发起源请求[^3]: ```nginx add_header 'Access-Control-Allow-Origin' 'https://example.com'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; if ($request_method = 'OPTIONS') { add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204; } ``` 这段额外的设置有助于防止潜在的安全风险,同时也支持预检请求(Preflight Request),使得前后端交互更加顺畅可靠。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值